Ext.layout.CardLayout扩展自Ext.layout.FitLayout布局,
对应面板布局(layout)配置项的名称为card。
该布局会包含多个子面板,任何时候都只有一个子面板处于显示状态,
这种布局类经常用来制作向导和标签页。该布局的重点方式是setActiveItem,
因为一次只能显示一个子面板,所以切换子面板的唯一途径就是调用setActiveItem方法,
它接受一个子面板id或索引作为参数。CardLayout布局并没有提供一个子面板的导航机制,
导航逻辑需要开发人员自己实现。Ext.layout.CardLayout主要方法如表
所示
方法名
说明
setActiveItem( String/Number item ) : void
根据子面板id或索引切换当前显示的子面板
[复制到剪贴板]CODE:
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
layout : 'card',
activeItem : 0, //设置默认显示第一个子面板
title:'Ext.layout.CardLayout布局示例',
frame:true, //渲染面板
height : 150,
width : 250,
applyTo :'panel',
defaults : { //设置默认属性
bodyStyle:'background-color:#FFFFFF;padding:15px' //设置面板体的背景色
},
items: [
{
title : '嵌套面板一',
html : '说明一',
id : 'p1'
},
{
title : '嵌套面板二',
html : '说明二',
id : 'p2'
}
,
{
title : '嵌套面板三',
html : '说明三',
id : 'p3'
}
],
buttons:[
{
text : '上一页',
handler : changePage
},
{
text : '下一页',
handler : changePage
}
]
})
//切换子面板
function changePage(btn){
var index = Number(panel.layout.activeItem.id.substring(1));
if(btn.text == '上一页'){
index -= 1;
if(index < 1){
index = 1;
}
}else{
index += 1;
if(index > 3){
index = 3;
}
}
panel.layout.setActiveItem('p'+index);
}
});
</script>
代码
演示了CardLayout卡片式布局的使用方式,
这里的重点是调用面板布局的setActiveItem方法激活指定id的子面板进行显示,
其中changePage函数的用途是计算点击上一页或下一页之后将要显示的子面板id,
然后将该id传入到setActiveItem方法中实现子面板的切换。运行效果如图
所示
0001.jpg (28.95 K)
2009-1-1 15:14:28
来源:一起Ext
原文地址:http://www.17ext.com/showtopic-1758.aspx