ExtJs 카드 레이아웃 마법사

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]
    });
});