ExtJS2.0实用简明教程——Card布局

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函数，该函数实现把父容器中的活动面板在三个子元素之间进行切换。程序的执行结果如下所示：

点击一下“切换”按钮，结果如下图所示：