Adding a toolbar to a grid - Extjs

Question

I have the following grid here:

Ext.define('AM.view.user.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',
    title: 'All Users',
    store: 'Users',

    initComponent: function () {
        this.columns = [{
            header: 'Name',
            dataIndex: 'name',
            flex: 4
        }, {
            header: 'User ID',
            dataIndex: 'user_id',
            flex: 1
        }, {
            header: 'Address',
            dataIndex: 'address',
            flex: 3
        }, {
            header: 'Age',
            dataIndex: 'agee',
            flex: 5
        }];

        this.callParent(arguments);
    }
});

Can a toolbar be added to the bottom of this grid or can they only be added to panels?

Also, how can I place normal text in a toolbar rather than a button?

Answer 1

Yes a grid panel inherits Ext.grid.Panel , you should be able to add:

dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [{
        xtype: 'button',
        text: 'Left Button'
    }, {
        xtype: 'tbfill'
    }, {
        xtype: 'button',
        text: 'Right Button'
    }]
}]

Answer 2

Any component that has Docked layout can have toolbars docked. Since Ext.grid.Panel extends Ext.panel.Panel , you can dock to it. See the bbar config: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-bbar

You can add text items to your toolbar by adding this to the toolbar's items :

{ xtype: 'tbtext', text: 'My Text' }

Docs for this here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.toolbar.TextItem

Answer 3

Alternately you can also add button using ' bbar[...] ' which is equivalent to

dockedItems: [{
    xtype: 'toolbar',
    dock: 'bottom',
    items: [
        { xtype: 'button', text: 'Button 1' }
    ]
}]

this allows you to add buttons at the bottom of your gridpanel all other button properties are allowed to use.

sample code is here:

 bbar: [
      { xtype: 'button', text: 'Button 1' },
      { xtype: 'button', text: 'Button 2' }
    ]

for more details you can refer the doc: http://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.panel.Panel-cfg-bbar