这种布局用来管理多个子组件,并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式,也就是我们所说的分布提交。
<script type="text/javascript">
Ext.application(
{
name:'layout_card',
launch:function(){
var navigate = function(panel,direction){
var layout = panel.getLayout();
layout[direction]();
Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
//判断是否有下一个card,如果没有则设置disabled为true
Ext.getCmp('move-next').setDisabled(!layout.getNext());
};
Ext.create(
'Ext.panel.Panel',
{
title:'card布局',
width:300,
height:200,
layout:'card',
activeItem:0,
x:30,
y:30,
renderTo: Ext.getBody(),
draggable:true, //是否允许拖动
//用于显示页码
bbar: [
{
id: 'move-prev',
text: '上一步',
handler: function(btn) {
navigate(btn.up("panel"), "prev");
},
disabled: true
},
'->', 决定两个按钮的位置
{
id: 'move-next',
text: '下一步',
handler: function(btn) {
navigate(btn.up("panel"), "next");
},
}
],
items: [
{
id: 'card-0',
html: '第一个card'
},
{
id: 'card-1',
html: '第二个card'
},
{
id: 'card-2',
html: '第三个card'
}
],
}
);
}
}
)
</script>
效果图