Javascript extjs 3.3.1运行时更改面板tbar

我有两个分机工具栏。tbar1和tbar2

我想在运行时根据某个事件在它们之间切换，这样当事件被称为tbar1时，tbar2将停靠到面板，而不是tbar1

有办法吗

在extjs 3.3.1文档中找不到可能的解决方案：

谢谢。

在ExtJS 4.x上尝试以下方法

---

谢谢你的回答。实际上，ExtJS4有很多更简单的方法来实现它——只需使用addDockedItem和RemoveDockedItem。这就是为什么我问ExtJS3而不是4。找不到在3中完成此操作的方法。

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'
        }]
    }]
})});