PDA

View Full Version : Nested panel doesn't fill open space after collapsing parent panel



michiel
22 Aug 2007, 6:46 AM
Hi,

I'm new to this forum and new to Extjs. Let me start of by saying I`m really impressed with the examples of Extjs in the interactive demos. Seeing all that's possible, made me decide to give it a go and try to make my own working layout. Using all the examples, I came up with a working layout of panels:

http://mileswebdesign.nl/extjs/screenshot.jpg

I do however have one problem with the layout. When I collapse the west-panel, the innercenter-panel remains the same size and doesn't fill the open space until I collapse the innerwest panel. Is this normal behavior? Or did I do something wrong while coding?

This is the code I'm using now:

Javascript:

<script type="text/javascript">
Layout = function(){
var layout;
return {
init : function(){
layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 80,
titlebar: false
},
west: {
split:true,
initialSize: 250,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
south: {
split:true,
initialSize: 45,
minSize: 45,
maxSize: 100,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true,
autoScroll:true,
closeOnTab: true
}
});

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('south', new Ext.ContentPanel('south', {title: 'South', closable: false}));
layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));


var innerLayout = new Ext.BorderLayout('center2', {
west: {
split:true,
initialSize: 250,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true,
autoScroll:true,
closeOnTab: true
}
});

innerLayout.add('west', new Ext.ContentPanel('innerwest', {title: 'Inner west'}));
innerLayout.add('center', new Ext.ContentPanel('innercenter', {title: 'Inner center'}));
layout.add('center', new Ext.ContentPanel('center1', {title: 'Tab 1'}));
layout.add('center', new Ext.ContentPanel('center2', {title: 'Tab 2', closable: true}));

layout.getRegion('center').showPanel('center1');
layout.endUpdate();
}
}
}();
Ext.EventManager.onDocumentReady(Layout.init, Layout, true);
</script>


Html:


<div id ="container">
<div id="north" class="x-layout-inactive-content">
North
<div id="toolbar"></div>
</div>
<div id="west" class="x-layout-inactive-content">

</div>
<div id="south" class="x-layout-inactive-content"></div>
<div id="center" class="x-layout-inactive-content"></div>
<div id="center1" class="x-layout-inactive-content"></div>
<div id="center2" class="x-layout-inactive-content"></div>
<div id="innerwest" class="x-layout-inactive-content">Innerwest</div>
<div id="innercenter" class="x-layout-inactive-content">

</div>


Thanx very much in advance for helping .. I probably will have more questions along the way :)

Cheers, Michiel