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

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);

Answer 2

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 3

What about dockedItems its much simpler too.

var toolbar1 = {
   xtype : 'toolbar',
   dock : 'top', // bottom, right, left
   items: [...]
};

var toolbar2 = {  
   xtype : 'toolbar',
   dock : 'top',
   items: [...]
};

Ext.create('Ext.panel.Panel', {
    dockedItems: [toolbar1,toolbar2]
});  

I know its quite old and already answered, may be it can help someone :)

Answer 4

I'm not sure if this is exactly what you are looking for but Toolbars has been revamped in Ext 3.0.

You might want to take a peek at: http://extjs.com/deploy/ext-3.0-rc1.1/examples/toolbar/toolbars.html

Answer 5

I'm not sure, whether it's possible or not, but what you can always do is to divide north area (if using border layout for example) into two rows using row layout. Then you can add one toolbar to the top row and the other one to the second row.

Answer 6

Look at this thread in the Ext forum. It describes how to create a toolbar and render it to an existing toolbar.

http://www.extjs.com/forum/showthread.php?t=12433