Ext.js Tool bar - extjs

Question

I am new to ext.js. I have been learning from Sencha Documentation. I am trying to implement tool bars in a panel. I am using 'tbar'. I was wondering if I can create a stack of tool bars on top of a panel. e.g. I want 3 tool bars on top; one after other.
Is there a way to do that?
Thanks in advance for the guidance.

Answer 1

Coming from 4.2.2 Documentation http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Panel-cfg-tbar
tbar : Object/Object[]
Convenience config. Short for 'Top Bar'.
tbar: [
{ xtype: 'button', text: 'Button 1' }
]
is equivalent to
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [
{ xtype: 'button', text: 'Button 1' }
]
}]
You can add multiple toolbars by using the bottom configuration like so, though I'm not sure it will look how you are thinking.
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [
{ xtype: 'button', text: 'Button 1' }
]
},{
xtype: 'toolbar',
dock: 'top',
items: [
{ xtype: 'button', text: 'Button 2' }
]
}]
An example as part of a panel
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
width: '100%',
//tbar: [
//{ xtype: 'displayfield', fieldLabel: ' tool bar 1' }
//]
//Instead of tbar(above) use the full dockedItems config
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [
{ xtype: 'displayfield', fieldLabel: ' tool bar 1' }
]
},{
xtype: 'toolbar',
dock: 'top',
items: [
{ xtype: 'displayfield', fieldLabel: ' tool bar 2' }
]
}],
renderTo: Ext.getBody()
});
})

Answer 2

Thanks for the guidance. I implemented 'tbar' as following. Is it a correct approach?
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
layout: 'vbox',
width: '100%',
defaults: {
frame: true,
},
items: [
{
xtype: 'panel',
width: '100%',
border: false, frame: false,
tbar: [
{ xtype: 'displayfield', fieldLabel: ' tool bar 1' }
]
},
{
xtype: 'panel',
width: '100%',
border: false, frame: false,
tbar: [
{ xtype: 'displayfield', fieldLabel: ' tool bar 2' },
]
},
{
xtype: 'panel',
width: '100%',
border: false, frame: false,
tbar: [
{ xtype: 'displayfield', fieldLabel: ' tool bar 3' },
]
}
],
renderTo: Ext.getBody()
});
})