Ext card布局

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方法中实现子面板的切换。