View Full Version : Same Toolbar on multiple content panels

2 May 2007, 4:05 AM
I have some tabbed panels within a Region and I would like each of them to have the same toolbar (ie I don't really want to create one toolbar per tab if I can help it).

Is there any way of doing this?

Many thanks

2 May 2007, 4:30 AM
Create one toolbar and assign it to all panels. The toolbar is object so assigning one to many panels just assigns reference.

2 May 2007, 6:26 AM
I think I may have missed something.
I create five grid panels. It appears that on the last to be added the tool bar is there but on subsequent panels, the grid is added but no toolbar. However, there is white space at the bottom of the panel which seems to be the size of the toolbar.

I am assigning each one with the toolbar parameter on the line as follows:

var vp = innerLayout.add('center', new Ext.GridPanel(grid, {title:name, toolbar: queueToolbar}));

I enclose a couple of snapshots of what happens.
Is there anything else I should do?

2 May 2007, 6:31 AM
The problem is that the toolbar gets rendered onto a div element, and the div can not exist more then once (actually, it can, but it will not write the toolbar to more then one!). My workaround/hack for this was to just build identical toolbars, and assign them to the different divs. You could build a js object that has the toolbar config options in it, then just pass that off to the myToolBar.add function for each div, that would save some repetitive code.

2 May 2007, 6:44 AM
I had a sneaking suspicion that might be the case. I was trying to avoid having multiple identical toolbars if I could as it is more things to build up in the DOM.
I have just tried adding a north panel and then rendering it into that and that seems to look ok - in fact better as it comes above the tabs!

Thanks for all of your help

2 May 2007, 6:55 AM
I haven't tried but one thing comes to my mind:

tbConfig = {
tbButtons = [ .... ];

tb1 = new Ext.Toolbar('container1', tbButtons, tbConfig);
tb2 = new Ext.Toolbar('container2', tbButtons, tbConfig);

etc., or

tb1 = new Ext.Toolbar('container1', [].concat(tbButtons), Ext.apply({}, tbConfig));
tb2 = new Ext.Toolbar('container2', [].concat(tbButtons), Ext.apply({}, tbConfig));

This way (if it works ;)) you need to maintain only one copy of toolbar config.