ext layout 之 card布局 使用示例
/*创建window/
function openWin(){
var win =new Ext.Window({}
var win=openWin();
/*翻转panel 控制器*/
var navHandler = function(direction){
// 这段程序可以包含控制导航步骤所需的业务逻辑。
// 在需要的时候它将调用setActiveItem方法，管理导航按钮的状态，
// 处理任何可能需要的逻辑分支，处理可能的操作，像退出或操作完成，等等。
// 在现实的实现中，一个完整的安装向导实现会非常复杂，它与复杂的需求有关。
// 可能需要要扩展CardLayout类。
var layout=card.getLayout();
var obj=this;
var bottoms=card.getBottomToolbar();
var p=card.layout.activeItem.id;
for(index=0; index<panel_ids.length;index++){
if(p==panel_ids[index]){
var n=index+direction;
layout.setActiveItem(n);
if(panel_ids[0]==panel_ids[n]){
bottoms.items.items[0].setDisabled(true);
bottoms.items.items[2].setDisabled(false);
}
if(panel_ids[0]!=panel_ids[n]&&panel_ids[panel_ids.length-1]!=panel_ids[n]){
bottoms.items.items[0].setDisabled(false);
bottoms.items.items[2].setDisabled(false);
}
if(panel_ids[panel_ids.length-1]==panel_ids[n]){
bottoms.items.items[0].setDisabled(false);
bottoms.items.items[2].setDisabled(true);
}
break;
}
}
};
/*创建panel*/
var panel_ids=['card-0','card-1','card-2'];
var card = new Ext.Panel({
title: 'Example Wizard',
layout:'card',
activeItem: 0, //确保在容器的配置项中设置了当前活动项！
bodyStyle: 'padding:15px',
defaults: {
// applied to each contained panel
border:false
},
// 只是一个例子，一个可能的导航方案，使用按钮
bbar: [
{
id: 'move-prev',
text: 'Back',
handler: navHandler.createDelegate(this,[-1]),
disabled: true
},
'->', //贪婪分隔符，这样按钮就被对齐到边界处
{
id: 'move-next',
text: 'Next',
handler: navHandler.createDelegate(this, [1])
}
],
// the panels (or "cards") within the layout
items: [{
id: panel_ids[0],
html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
},{
id: panel_ids[1],
html: '<p>Step 2 of 3</p>'
},{
id: panel_ids[2],
html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
}]
});
win.add(card);
win.show();
效果图:
