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

extjs 3.3.1在运行时更改面板tbar

1 个答案: