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

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

Answer 3

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 4

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