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

最新推荐文章于 2025-12-03 23:30:00 发布

转载最新推荐文章于 2025-12-03 23:30:00 发布 · 849 阅读

文章标签：

#extjs #function #html #layout #活动

EXT2 专栏收录该内容

54 篇文章

订阅专栏

本文介绍如何使用Ext布局中的Card布局来实现安装向导或Tab选项板等应用中的面板切换效果。通过具体代码示例展示了如何创建包含多个子面板的容器，并通过按钮控制不同子面板的显示。

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