2 NestedLayoutPanels?

[Chroder]

I'm trying to creating something like this:


+----------------------------------------------------------------+
| Header |
+----------------------------------------------------------------+
| Nav | Top part |
| | |
| | |
| | |
| +----------------------------------+----------------------+
| | Area 1 | Area 2 |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
+------+----------------------------------+----------------------+
Things seem to work fine except for the bottom part is empty. I think the width/height isn't being applied?

HTML:

<div id="container" >
<div id="header" class="ylayout-inactive-content">
Header
</div>

<div id="main_nav" class="ylayout-inactive-content">
Nav
</div>

<div id="main_center" class="ylayout-inactive-content"></div>


<dib id="mychats_grid" class="ylayout-inactive-content">
Grid
</div>

<dib id="mychats_center" class="ylayout-inactive-content"></div>

<dib id="mychats_messages" class="ylayout-inactive-content">
Messages
</div>

<dib id="mychats_info" class="ylayout-inactive-content">
Info
</div>
</div>
And the JS:

var mainLayout = new YAHOO.ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 35
},
west: {
split:true,
initialSize: 200,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 400
},
center: {
autoScroll: false
}
});

var mychatsLayoutSub = new YAHOO.ext.BorderLayout('mychats_center', {
east: {
split: true,
initialSize: 400,
collapsible: true,
titlebar: true
},

center: {
autoScroll: true
}
});
mychatsLayoutSub.add('east', new YAHOO.ext.ContentPanel('mychats_info', {title: 'Information', fitToFrame:true}));
mychatsLayoutSub.add('center', new YAHOO.ext.ContentPanel('mychats_messages'));

var mychatsLayout = new YAHOO.ext.BorderLayout('main_center', {
north: {
split: true,
initialSize: 300,
collapsible: true,
minSize: 100,
titlebar: true
},

center: {
autoScroll: false
}
});
mychatsLayout.add('north', new YAHOO.ext.ContentPanel('mychats_grid', {title: 'Chats', fitToFrame:true}));
mychatsLayout.add('center', new YAHOO.ext.NestedLayoutPanel(mychatsLayoutSub), {fitToFrame:true});




mainLayout.beginUpdate();
mainLayout.add('north', new YAHOO.ext.ContentPanel('header', {fitToFrame:true}));
mainLayout.add('west', new YAHOO.ext.ContentPanel('main_nav', {title: 'Navigation', fitToFrame:true}));
mainLayout.add('center', new YAHOO.ext.NestedLayoutPanel(mychatsLayout));
mainLayout.endUpdate();

Thanks for any ideas anyone has :D I hope I didn't make an obvious mistake :oops:

[jack.slocum]

I noticed a bunch of these in your markup:

<dib id="mychats_messages" class="ylayout-inactive-content">
Messages
</div>

That should be div, not dib right?

[Chroder]

LOL That was it. :oops: Damn typo's. That's what you get when you code all day ;)

Thanks for taking the time to be a second pair of eyes, sometimes it's hard to spot the simple mistakes when you're the one who coded it :) And thanks for making YUI-EXT, it's making this project so much easier. I was originally creating the interface by hand before the BorderLayout, but yours (surprise surprise) works so much better ;)

[jack.slocum]

I know what you mean. If you look in the Bugs forum there are few silly errors in there. :) Sometimes a second pair of eyes is exactly what is needed.