《ExtJS2.0实用简明教程》连载（3/30）——Card布局

《ExtJS2.0实用简明教程》连载（3/30）——Card布局<o:p></o:p>

　　　　作者：小雨     发表时间：2008-02-17

上一篇：Border区域布局

 

<o:p> </o:p>

<o:p></o:p>

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

（版权声明：本文版权归EasyJF开源社区的冷雨所有，受法律保护，可以在互联网上进行转载，转载必须保留作者版权声明及链接；未经本人书面许可，不得把本人Blog上的文章用于出版、发行或其它商业用途。）

下一篇：Border区域布局<o:p></o:p>