ExtJS2.0实用简明教程——Card布局
2008-02-23 19:40
651 查看
Card布局由Ext.layout.CardLayout类定义,名称为card,该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。看下面的代码:
上面的代码创建了一个容器组件面板,面板中包含三个子面板元素,父容器包含一个“切换”按钮,点击该按钮将会执行changeTab函数,该函数实现把父容器中的活动面板在三个子元素之间进行切换。程序的执行结果如下所示:
点击一下“切换”按钮,结果如下图所示:
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函数,该函数实现把父容器中的活动面板在三个子元素之间进行切换。程序的执行结果如下所示:
点击一下“切换”按钮,结果如下图所示:
相关文章推荐
- ExtJS2.0实用简明教程——Table布局及其它布局
- ExtJS 2.0 实用简明教程之布局概述
- ExtJS2.0实用简明教程 - Border区域布局
- ExtJS2.0实用简明教程——布局概述
- ExtJS 2.0实用简明教程 之Border区域布局
- ExtJS2.0实用简明教程——Border区域布局
- ExtJS2.0实用简明教程——Column列布局
- ExtJS2.0实用简明教程——Fit布局
- ExtJS2.0实用简明教程 - 布局概述
- ExtJS2.0实用简明教程——Form布局
- ExtJS 2.0实用简明教程 之Border区域布局
- ExtJS2.0实用简明教程——Accordion布局
- ExtJS 2.0 实用简明教程之布局概述
- ExtJS2.0实用简明教程 - Ext类库简介
- ExtJS2.0实用简明教程——组件的使用
- ExtJS2.0实用简明教程——窗口基本应用
- ExtJS 2.0实用简明教程 之ExtJS版的Hello
- ExtJS2.0实用简明教程——对话框
- ExtJS2.0实用简明教程——基本表格GridPanel
- ExtJS 2.0实用简明教程 之Ext类库简介