//导航

    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',

        width: 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()

    });