extjs 3.3.1 在运行时更改面板 tbar

Question

我有 2 个Ext.Toolbar。 tbar1 和 tbar2。

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

有办法吗？

在 extjs 3.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'
        }]
    }]
})});