ExtJs Card 布局之向导

上一步，下一步的类向导，这里用card布局。

Ext.onReady(function () {
    this.firstPanel = new Ext.Panel({
        frame: true,
        title: '第一个面板',
        html: '这是第一个面板'

    });
    this.secondPanel = new Ext.Panel({
        frame: true,
        title: '第二个面板',
        html: '这是第二个面板'

    });
    var i = 0;
    function cardHandler(direction) {
        if (direction == -1) {
            i--;
            if (i < 0) {
                i = 0;
            }
        }
        if (direction == 1) {
            i++;
            if (i > 1) {
                i = 1;
                return false;
            }
        }
        var btnNext = Ext.getCmp("move-next");
        var btnPrev = Ext.getCmp("move-prev");
        var btnSave = Ext.getCmp("move-save");
        if (i == 0) {
            btnSave.hide();
            btnNext.enable();
            btnPrev.disable();

        }
        if (i == 1) {
            btnSave.show();
            btnNext.disable();
            btnPrev.enable();
        }
        this.cardPanel.getLayout().setActiveItem(i);
    };
    //CARD总面板
    this.cardPanel = new Ext.Panel({
        frame: true,
        title: 'card 面板',
        renderTo: document.body,
        height: 400,
        width: 400,
        layout: 'card',
        activeItem: 0,
        bbar: ['->', {
            id: 'move-prev',
            text: '上一步',
            handler: cardHandler.createDelegate(this, [-1])
        },
        {
            id: 'move-save',
            text: '保存',
            hidden: true,
            handler: function () {
                alert("保存");
            }
        },
        {
            id: 'move-next',
            text: '下一步',
            handler: cardHandler.createDelegate(this, [1])
        }],
        items: [this.firstPanel, this.secondPanel]
    });
});