extjs card layout

var navHandler = function(direction) {

    var card = Ext.getCmp('wizard');

    var layout = card.getLayout();

    var index = card.items.indexOf(layout.activeItem);

    var count = card.items.getCount();

 

    if (direction == -1) {

        index--;

        if (index < 0) { index = 0; }

    }

 

    if (direction == 1) {

        index++;

        if (index >= count) { index = count - 1; return false; }

    }

 

    var nextButton = Ext.getCmp('move-next');

    var previousButton = Ext.getCmp('move-prev');

    if (index == 0) {

        previousButton.setDisabled(true);

    } else {

        previousButton.setDisabled(false);

    }

 

    if (index == count - 1) {

        nextButton.setText("完成");

        nextButton.setDisabled(true);

    } else {

        nextButton.setText("下一步");

        nextButton.setDisabled(false);

    }

   

    layout.setActiveItem(index);

};

 

new Ext.Viewport({

    title:"create_design_project",

    layout:'fit',

    renderTo:"pd-grid",

    items: [{

    id: 'wizard',

    autoScroll:true,

    layout:'card',

    activeItem: 0,

    defaults:{

        border: false

    },

    bbar:[{

        id: 'move-prev',

        text: '上一步',

           handler: navHandler.createDelegate(this, [-1]),

        disabled: true

    }, {

        id: 'move-next',

        text: '下一步',

           handler: navHandler.createDelegate(this, [1])

    }],

    items: [createProjectForm

    ,{

        id: 'card-1',

        autoScroll:true,

        html: '<h1>hehe</h1><p>second step, total 3 step</p>'

    },{

        id: 'card-2',

        html: '<h1>hehe</h1><br/><p>finish</p>'

    }]

    },{

    region: 'center',

        split: true,

        border: true

        }]

    });

});

 

<div id="pd-grid"></div>

转载于:https://www.cnblogs.com/yinww/archive/2009/11/20/1606609.html