Extjs布局——layout: 'card'

先看下此布局的特性：

下面演示一个使用layout: 'card'布局的示例（从API copy过来的）——导航面板（注：导航面板切换下一个或上一个面板实际是导航面板的布局--layout调用指定的方法。）

    //导航
    var navigate = function(panel, direction){//panel:导航面板；direction:layout调用的方法
        // 此程序可以包含一些控制导航步骤的必要业务逻辑. 比如调用setActiveItem, 管理导航按钮的状态,
        // 处理可能出现的分支逻辑, 处理特殊操作像取消或结束等等. 一个完整的向导页, 对于复杂的需求
        // 实现起来可能也会相当复杂, 在实际的程序中通常应该以继承CardLayout的方式来实现.

        /**
         * 获取导航面板的布局
         */
        var layout = panel.getLayout();
        /**
         * 导航面板切换至下一个组件或上一个组件
         *
         * 此语句是调用layout的某个方法。注意：因为layout所调用的方法名是变量，所有用layout[methodName]()这种形式。
         * 示例：如direction为"next",则此语句等同于：layout.next();将布局的激活(可见)组件切换到下一个.
         */
        layout[direction]();
        /**
         * 设置导航面板的bbar中的按钮状态
         *
         * getCmp:通过id查找现有的Component.返回：Ext.Component。 --Ext
         * setDisabled(Boolean disabled ):启用或者禁用当前组件. --Ext.Component
         * getPrev():返回布局中当前激活(可见)组件的上一个组件.返回：Ext.Component。 --Ext.layout.container.Card
         */
        Ext.getCmp('move-prev').setDisabled(!layout.getPrev());//如果当前Panel的当前激活组件没有上一个组件，则设置'move-prev'按钮为禁用。
        Ext.getCmp('move-next').setDisabled(!layout.getNext());//如果当前Panel的当前激活组件没有下一个组件，则设置'move-next'按钮为禁用。
    };

    //创建导航面板
    Ext.create('Ext.panel.Panel', {
        title: 'Example Wizard',
         300,
        height: 200,
        layout: 'card',
        bodyStyle: 'padding:15px',
        defaults: {
            // 应用到所有子面板
            border: false
        },
        // 这里仅仅用几个按钮来示例一种可能的导航场景.
        bbar: [//工具栏的默认类型是按钮
            {
                id: 'move-prev',
                text: 'Back',
                xtype: 'button',
                handler: function(btn) {//Ext.button.Button-cfg-handler
                    navigate(btn.up("panel"), "prev");//up方法：沿着 ownerCt 查找匹配简单选择器的祖先容器——即本示例创建的Panel
                },
                disabled: true
            },
            '->', // 一个长间隔, 使两个按钮分布在两边
            {
                id: 'move-next',
                text: 'Next',
                handler: function(btn) {//btn:This button.
                    navigate(btn.up("panel"), "next");
                }
            }
        ],
        // 布局下的各子面板
        items: [{
            id: 'card-0',
            html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
        },{
            id: 'card-1',
            html: '<p>Step 2 of 3</p>'
        },{
            id: 'card-2',
            html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
        }],
        renderTo: Ext.getBody()
    });

效果：