ExtJS Toolbar with multiple rows

Question

Is it possible to have an ExtJsToolBar with multiple lines? I want a few controls on the first line and 3 ExtJsButtons on the 2nd. The toolbar is the top toolbar of a Panel.

Answer 1

Not sure about earlier versions, but as of ExtJS 4.0 you can do it like this when you're defining the grid:

dockedItems: [
    {
        xtype: 'toolbar',
        dock: 'top',
        items: [
            {text:'Toolbar 1 Button 1'},
            {text:'Toolbar 1 Button 2'}
        ]
    },
    {
        xtype: 'toolbar',
        dock: 'top',
        items: [
            {text:'Toolbar 2 Button 1'}
        ]
    }
],

http://dev.sencha.com/deploy/ext-4.0.2a/docs/#/api/Ext.panel.Panel

Answer 2

You haven't mentioned to what widget you like to add toolbars, but in general you may add as many toolbars as you want:

var panel = new Ext.Panel();
var tool1 = new Ext.Toolbar({...});
var tool2 = new Ext.Toolbar({...});

panel.add(tool1);
panel.add(tool2);
...

If you like to add extra toolbar to the top of grid, then do find grid's panel component and add toolbars to it. It could look like this (not tested):

tPanel = grid.getTopToolbar().ownerCt; // get top toolbar's container panel
tPanel.add(anotherToolbar);