Extjs3.3.1运行时更改面板tbar

Question

我要吃2 Ext.Toolbar。tbar1和tbar2.

我希望根据某些事件在运行时在它们之间切换--这样，当事件被调用时，tbar1被停靠到面板上，而在下一次，tbar2被停靠到面板而不是tbar 1。

有办法吗？

在extjs3.3.1文档中找不到可能的解决方案：http://extjs.cachefly.net/ext-3.3.1/docs/

谢谢。

Answer 1

尝试以下“方法”(工作在ExtJS 4.x上) JSFIDDLE

Ext.onReady(function () {
var myPanel = Ext.create(Ext.panel.Panel, {
    height: 300,
    width: 500,
    title: "Panel Header",
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'button',
        margin: '10 0 0 10',
        text: 'Show Toolbar X',
        listeners: {
            click: function (me, options) {
                var panel = me.getBubbleParent();
                var xToolbar = panel.dockedItems.items[1].items.items[0];
                var yToolbar = panel.dockedItems.items[1].items.items[1];
                xToolbar.setVisible(true);
                yToolbar.setVisible(false);
            }
        }
    }, {
        xtype: 'button',
        margin: '10 0 0 10',
        text: 'Show Toolbar Y',
        listeners: {
            click: function (me, options) {
                var panel = me.getBubbleParent();
                var xToolbar = panel.dockedItems.items[1].items.items[0];
                var yToolbar = panel.dockedItems.items[1].items.items[1];
                xToolbar.setVisible(false);
                yToolbar.setVisible(true);
            }
        }
    }],
    tbar: [{
        xtype: 'container',
        itemId: 'container1',
        hidden: false,
        items: [{
            xtype: 'button',
            margin: '0 0 0 5',
            text: 'Add'
        }, {
            xtype: 'button',
            margin: '0 0 0 5',
            text: 'Edit'
        }, {
            xtype: 'button',
            margin: '0 0 0 5',
            text: 'Delete'
        }, {
            xtype: 'button',
            margin: '0 0 0 5',
            text: 'Update'
        }]
    }, {
        xtype: 'container',
        itemId: 'container2',
        hidden: true,
        items: [{
            xtype: 'button',
            margin: '0 0 0 5',
            text: 'New'
        }, {
            xtype: 'button',
            margin: '0 0 0 5',
            text: 'Open'
        }, {
            xtype: 'button',
            margin: '0 0 0 5',
            text: 'Save'
        }, {
            xtype: 'button',
            margin: '0 0 0 5',
            text: 'Undo'
        }, {
            xtype: 'button',
            margin: '0 0 0 5',
            text: 'Redo'
        }]
    }]
})});