Adding a toolbar to a grid - Extjs - 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