Accessing toolbar from extjs Grid

Question

I have a requirement where I have a number instances of a custom Grid (called PackageGrid).

This Grid has a default Toolbar with a couple of buttons. However for each instance of the Grid that I create, some additional widgets can be added to the toolbar using the insert method on the toolbar like so :

tBar.insert(0, {xtype:'button'})

My first approach was to define a custom toolbar and assign it to a variable, and then add that variable to my Grid, like so :

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

I hold a reference to the toolbar called referenceToToolbar. I then later grab this toolbar reference and add my widgets.

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

var tBar = this.packageGrid.referenceToToolbar;

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

The problem with this approach is that when I add widgets using tBar.insert(..) to my grid instances, ALL of my grids isntances get the same widgets... because, while the Grids are seperate instances, there is only one toolbar instance shared across all grids (tb).

I have tried playing around with the initComponent method to create an instance of the toolbar.

Basically I need ONE instance of a toolbar for ONE instance of my grid. And then be able to get a reference to that toolbar (before render time), and add some more widgets.

Can that be done?

Answer 1

You can pass additional toolbar item as configuration into grid. Then in grid's initComponent method you can create grid's tbar with merged items (shared and additional).

So your grid definition could be like this:

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

Then you can pass additional toolbar items in configuration when you are creating instance of your grid:

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

Fiddle with example: https://fiddle.sencha.com/#fiddle/70q