carousel组件是个非常不错的东东,自带可滑动的效果,效果如下图
上面部分可以左右滑动,下面部分可以上下滑动,效果还是不错的,app程序中很有用的布局
代码如下:
Ext.application({
name:'itKingApp',
/**
* Carousel 组件
*/
launch:function(){
var carousel1=Ext.create('Ext.Carousel',{
ui:'dark',
flex:1,
direction:'horizontal',
items:[
{
html:'left',
style:'background-color:pink'
},
{
html:'center',
style:'background-color:green'
},
{
html:'right',
style:'background-color:blue'
}
]
});
var carousel2=Ext.create('Ext.Carousel',{
ui:'dark',
flex:1,
direction:'vertical',
items:[
{
html:'left',
style:'background-color:yellow'
},
{
html:'center',
style:'background-color:gray'
},
{
html:'right',
style:'background-color:blue'
}
]
})
var panel=Ext.create('Ext.Panel',{
layout:{
type:'vbox'},
items:[carousel1,carousel2]
});
Ext.Viewport.add(panel)
}
})