Card布局由Ext.layout.CardLayout类定义,名称为card,该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。看下面的代码:
Ext.onReady(function(){ var panel=new Ext.Panel({ renderTo:"hello", title:"容器组件", width:500, height:200, layout:"card", activeItem: 0, layoutConfig: { animate: true }, items:[{title:"子元素1",html:"这是子元素1中的内容"}, {title:"子元素2",html:"这是子元素2中的内容"}, {title:"子元素3",html:"这是子元素3中的内容"} ], buttons:[{text:"切换",handler:changeTab}] } ); var i=1; function changeTab() { panel.getLayout().setActiveItem(i++); if(i>2)i=0; } });
上面的代码创建了一个容器组件面板,面板中包含三个子面板元素,父容器包含一个“切换”按钮,点击该按钮将会执行changeTab函数,该函数实现把父容器中的活动面板在三个子元素之间进行切换。程序的执行结果如下所示:
点击一下“切换”按钮,结果如下图所示: