Edit in JSFiddle

/**
 * CardPanel
 * 提供了后退功能和toolBar的panel
 * 
 * 使用setActiveCard来设置活动的card，
 * CardPanel将会自动将当前card压栈。
 * 
 * 当点击后退按钮的时候，CardPanel会
 * 自动取出栈顶card，将其设为活动状态
 * 同时销毁上一个card
 */
Ext.define('CardPanel', {
    extend  : 'Ext.Panel',
    xtype : 'cardpanel',
    constructor: function(args){
        this.callParent(arguments);
        var backButton = this.down('button[tag= "cardpanel-back-button"]');
        backButton.hide();
    },
    config : {
        layout : {
            type : 'card',
        },
        items : [{
            xtype : 'toolbar',
            docked : 'top',
            tag: 'cardpanel-toolbar',
            title : '标题',
            items : [{
                xtype : 'button',
                text : '后退',
                ui : 'back',
                tag: 'cardpanel-back-button',//只用作组件选择的标识
                handler : function() {
                    this.onBack();
                },
                onBack : function() {
                    var cardPanel = this.getParent().getParent();
                    cardPanel.doBack();
                }
            }]
        }]
    },
    setTitle : function(newTitle){
        var toolbar = this.down('toolbar[tag = "cardpanel_toolbar"]');
        toolbar.setTitle(newTitle);
    },
    cardStack : new Array(),
    setActiveCard : function(newCard) {
        var oldCard = this.getActiveItem();
        this.cardStack.push(oldCard);
        this.setActiveItem(newCard);
    },
    doBack : function() {
        this.getActiveItem().destroy();
        var card = this.cardStack.pop();
        card.isBack = true;
        this.setActiveItem(card);
    },
    applyActiveItem : function(newCard, oldCard) {
        var backButton = this.down('button[tag= "cardpanel-back-button"]');
        if(newCard == this.items.items[1] || !oldCard) {
            backButton.hide();
        } else {
            backButton.show();
        }
        return this.callParent(arguments);
    }
});

////////////////////////////////////////////////////
//以下是使用示例
Ext.application({
    launch: function(){
        var cardPanel = Ext.create('CardPanel');
        Ext.Viewport.add(cardPanel);
        var i = 0;
        var gotoNewCard = function(){
            var newCard = Ext.create('Ext.Container',{
                html: 'container'+i,
                items: {
                    xtype: 'button',
                    text: 'next one',
                    handler: function(){
                        gotoNewCard();
                    }
                }
            });
            cardPanel.setActiveCard(newCard);
            i++;
        };
        gotoNewCard();
    }
});