从extjs网格访问工具栏

我有一个需求，其中我有一个自定义网格（称为PackageGrid）的多个实例

此网格有一个默认工具栏，其中包含两个按钮。但是，对于我创建的每个网格实例，可以使用工具栏上的insert方法将一些附加小部件添加到工具栏中，如下所示：

var tb = Ext.create('js.grid.Toolbar') //my custom toolbar


Ext.define('js.grid.PackageGrid', {

    referenceToToolbar: tb,

    extend: 'Ext.grid.Panel',

    tbar: tb //this.toolbar
});

tBar.insert（0，{xtype:'button'}）

我的第一种方法是定义自定义工具栏并将其分配给变量，然后将该变量添加到我的网格中，如下所示：

var tb = Ext.create('js.grid.Toolbar') //my custom toolbar


Ext.define('js.grid.PackageGrid', {

    referenceToToolbar: tb,

    extend: 'Ext.grid.Panel',

    tbar: tb //this.toolbar
});

我持有一个名为referencetoolbar的工具栏引用。然后我抓取这个工具栏参考并添加我的小部件

this.packageGrid = Ext.create('js.grid.PackageGrid')

var tBar = this.packageGrid.referenceToToolbar;

tBar.insert(0, {....})

这种方法的问题是，当我使用tBar.insert（..）向我的网格实例添加小部件时，我的所有网格实例都会得到相同的小部件。。。因为，虽然网格是独立的实例，但只有一个工具栏实例在所有网格（tb）中共享

我尝试过使用initComponent方法来创建工具栏的实例

基本上，我需要一个工具栏的实例作为网格的一个实例。然后能够获得对该工具栏的引用（在渲染时间之前），并添加更多的小部件

---

可以这样做吗？

您可以将附加的工具栏项作为配置传递到网格中。然后在网格的

initComponent

方法中，您可以创建网格的

tbar

，其中包含合并项（共享项和附加项）

因此，您的网格定义可以如下所示：

Ext.define('js.grid.PackageGrid', {

    extend: 'Ext.grid.Panel',

    initComponent: function() {
        var me = this;

        me.initTbar();

        me.callParent();

    },
    initTbar: function() {

        var me = this;

        var tbarItems = [{
            xtype: 'button',
            text: 'Shared Button'
        }];

        if (me.aditionalTbarItems && me.aditionalTbarItems.length) {

            tbarItems = me.aditionalTbarItems.concat(tbarItems);
        }

        me.tbar = tbarItems;
    }    
});

然后，在创建网格实例时，可以在配置中传递其他工具栏项：

var grid1 = Ext.create('js.grid.PackageGrid', {
    title: 'Grid 1',
    aditionalTbarItems: [{
       xtype: 'button',
       text: 'Grid 1 Button'
    }],
    renderTo: Ext.getBody()
});

摆弄示例：