two toolbars in the same region?

[brian]

I have more toolbar buttons/items than can fit into one toolbar width of a dialog layout. I would like to put the second toolbar directly below the first in the 'north' region and have the panel resizeEl to fit both of them exactly.

I am currently putting both of them in a wrapper and putting them in the north region, but I still have to set the size manually like this when creating the dialog:



north:{autoScroll:false,initialSize:60}


otherwise they won't show because the north region isn't created with any height. Specifying resizeEl:wrapper like:


layout.add('north', new Ext.ContentPanel(Ext.id(), {
autoCreate : true,
toolbar: this.tb,
fitToFrame:true,
resizeEl: this.wrapper
}));

doesn't seem to work. Any suggestions for a simple solution or do I have to create the layout then get measurements and then set the size manually? Thanks in advance!

[thesilentman]

Hello brian,
I was also looking for a solution to this.
Did you find a way to accomplish it?

[jsakalos]

I haven't tried myself what I'm going to tell you but I have an idea:



<div id="toolbar">
<div id="toolbar1"></div>
<div id="toolbar2"></div>
</div>
<div id="content-body"></div>


Create your toolbars in "toolbar1" and "toolbar2" but for content panel set as toolbar property the wrapper div "toolbar".

Render your content in "content-body" and set also resizeEl to "content-body".

If you don't like the idea drop it; I don't know if it works. But if it does, let us know.

[thesilentman]

Hello Jsakalos,

Indeed this worked. Thank you a lot!!! =D>

Here's the JS for the creation of the toolbars:


// ****************** Create Toolbars with asample button each ********************
var tb = new Ext.Toolbar('toolbar1');
tb.add({
text: 'Toolbar1',
enableToggle: true,
pressed: true
});
var tb2 = new Ext.Toolbar('toolbar2');
tb2.add({
text: 'Toolbar2',
enableToggle: true,
pressed: true
});


Here's the HTML with the DIV Creation for the Northern region in my case:



<div id="north" class="ylayout-panel ylayout-panel-north" >
<div id="toolbar">
<div id="toolbar1" class="logo ylayout-active-content" ></div>
<div id="toolbar2" class="logo ylayout-active-content" ></div>
</div>
</div>


I initialized the northern region like this:


north: {
split:true,
initialSize: 57,
minSize: 57,
maxSize: 57,
titlebar: false

},

[jsakalos]

Supeeeeer!
I'm glad I helped.

[PFM]

I have an issue with the scollbars for resizeEl when using two toolbars. The scollbar will not take into account 2 toolbars. I am not able to set the toolbar prooperty of the ContentPanel by just using the div tag 'feed-tree-node-tb' because it expects a toolbar object to be passed. Am I missing something from the above posts? Any hints on how I can get the resizeEl to scroll properly when using 2 toolbars?



<div id="feed-tree-node-inner-west" class="x-layout-inactive-content">
<div id="feed-tree-node-tb">
<div id="feed-tree-node-tb-1"></div>
<div id="feed-tree-node-tb-2"></div>
</div>
<div id="feed-tree-node-tree"></div>
</div>





west: {
split:true,
initialSize: 400,
minSize: 200,
maxSize: 600,
autoScroll:true,
collapsible:false,
titlebar: false
},
...
feedTreeNodeToolbar1 = new Ext.Toolbar('feed-tree-node-tb-1');
feedTreeNodeToolbar1.addField(feedTreeComboStatic);
feedTreeNodeToolbar2 = new Ext.Toolbar('feed-tree-node-tb-2');
feedTreeNodeToolbar2.addField(feedTreeNodeUserIdCombo);
...
layout.beginUpdate();
feedTreeNodeInnerLayout.add('west', new Ext.ContentPanel('feed-tree-node-inner-west',
{title: 'Feed Tree Nodes',fitToFrame:true, resizeEl:'feed-tree-node-tree'}));
....

[jsakalos]

Try to remove autoScroll from panel and set overflow:auto on the body instead.

Just idea, haven't tried... ;)

[PFM]

Thanks jsakalos. I did the following and got it to work



Used "overflow:auto;wrap:true"
Removed autoScroll
Added the adjustments config option to adjust for the second toolbar


feedTreeNodeInnerLayout.add('west', new Ext.ContentPanel('feed-tree-node-inner-west', {title: 'Feed Tree Nodes', fitToFrame:true, adjustments:[0,-58], resizeEl:'feed-tree-node-tree'}));



this post also helped me...

http://extjs.com/forum/showthread.php?t=1138&highlight=adjustments