Ext的Card布局示例

//这个代码就有点通用性了
        var navHandler = function(direction) {

            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 btnNext = Ext.getCmp('move-next');
            var btnBack = Ext.getCmp('move-prev');

            if (index == 0) {
                btnBack.setDisabled(true);
            }
            else {
                btnBack.setDisabled(false);
            }

            if (index == count - 1) {
                btnNext.setText("完  成");
                btnNext.setDisabled(true);
            }
            else {
                btnNext.setText("下一步");
                btnNext.setDisabled(false);
            }

            layout.setActiveItem(index);

        };

 

        var card = new Ext.Panel({
            width: 200,
            height: 200,
            title: '注册向导',
            layout: 'card',
            activeItem: 0,
            bodyStyle: 'padding:15px',
            defaults: {
                border: false
            },
            listeners: { 'afterrender': { fn: function() { Ext.getCmp('move-prev').setDisabled(true); } } },
            bbar: [
                '->',
                {
                    id: 'move-prev',
                    text: '上一步',
                    handler: navHandler.createDelegate(this, [-1])
                },
                '-',
                {
                    id: 'move-next',
                    text: '下一步',
                    handler: navHandler.createDelegate(this, [1])
                }
            ],

            items: [{
                id: 'card-0',
                html: '<h1>欢迎来到注册向导!</h1><p>第1/3步！</p>'
            }, {
                id: 'card-1',
                html: '<h1>请填写注册资料!</h1><p>第2/3步！</p>'
            }, {
                id: 'card-2',
                html: '<h1>注册成功!</h1><p>第3/3步！完成！</p>'
            }],

                renderTo: Ext.getBody()

            });