Adding a toolbar to a grid - Extjs

extjs grid panel toolbar

22,249

Solution 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'
    }]
}]

Solution 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

Solution 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

22,249

Author by

Clay Banks

I created The Vurger App!

Updated on November 04, 2020

Comments

Clay Banks over 3 years

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?

Clay Banks almost 11 years

Hey thanks that worked great. And I'll check the documentation.
Clay Banks almost 11 years

How could I place toolbar buttons on the left and right sides?
BigBadOwl almost 11 years

Add a { xtype: 'tbfill' } between the button configs in the toolbar
Clay Banks almost 11 years

Very Nice! Thank you sir
Clay Banks almost 11 years

While you're at it, how could I get the length of my grid size to display on this toolbar? (The length of the store/rows in the grid)
struppi almost 11 years

That last question is scope creep! I think it merits a new question.
BigBadOwl almost 11 years

In that case I would use a paging toolbar. docs.sencha.com/extjs/4.2.1/#!/api/Ext.toolbar.Paging