Problem Hiding and Resizing layouts

[eseguin3]

Hi. I have a border layout that consists of a large center area, and then a nested layout to the north, that also has a north and center region. My problem is this: I'm trying to make it so that on the click of a button, the north-center region(/the center region in the northern nested layout) will hide and the rest of the layout will resize itself accordingly.

Right now, my code is:

var layout = new Ext.BorderLayout(Ext.get('container'), {
north: {
split:true,
collapsible: true,
},
center: {
autoScroll: false,
}
});
var headerLayout = new Ext.BorderLayout(Ext.get('header'), {
north: {
collapsible: false
},
center: {
collapsible: true,
autoScroll: false
}
});
layout.beginUpdate();

headerLayout.add('north', new Ext.ContentPanel('divA',
{fitToFrame:false, closable:false}));
headerLayout.add('center', new Ext.ContentPanel('divB',
{fitToFrame:true, closable:false}));

layout.add('north', new Ext.NestedLayoutPanel(headerLayout));
layout.add('center', new Ext.ContentPanel('centerBody',
{fitToFrame:false, closable:false}));
layout.endUpdate();

//--------Events-----------
var toggleDivB= function() {
// This is being called correctly.
headerLayout.getRegion('center').collapse(true);
}

When I click the button with this, the region collapses, but there is a big blue empty space where it used to be and the other layouts don't resize. I've tried a number of different combinations of using collapse(), hide(), display:none, visibility:hidden/collapsed, but nothing seems to be working right.

I've been pretty successful in hiding the information I want to hide, but I've had no luck at all with resizing layouts. I know that regions have a resizeTo() function, but I would need to be able to find out the current height of the regions before hiding them to use that correctly. Any ideas?

[evant]

You can't effectively hide the centre. It acts as a 'fill' around the rest of the elements in the layout.

To achieve this you'd need to change the Ext layout code.

[para]

I did the exact same thing in my application. I have a region which contains a toolbar that the user can hide/show.
I implemented it using the hide(), show() and resizeTo() functions. I would recommend attempting it a different way first, because the resizeTo() doesn't work quite like I thought it did originally. (I have to call it twice for it to work properly).
Anyway, here's my code... It may be a bit confusing, but check it out.

north region of layout has (north, center, south) regions. The south region of the north layout is my toolbar.

{ North
North { Center
{ South (toolbar that will be hidden)
Center { //rest of page



//This toggles the south region....
var northRegion = layout.getRegion('North');
var southRegion = layout.getRegion('North').getActivePanel().getLayout().getRegion('South');

if(southRegion.visible) {
southRegion.hide();
// The error involved is due to border/margins (probably)
// If it says resizeTo(100), it will resize to something around 98.
var newH = northRegion.panelSize.height - southRegion.config.initialSize;
northRegion.resizeTo(newH);
northRegion.resizeTo(newH + newH - northRegion.panelSize.height);
}
else {
southRegion.show();
var newH = northRegion.panelSize.height + southRegion.config.initialSize;
northRegion.resizeTo(newH);
northRegion.resizeTo(newH + newH - northRegion.panelSize.height);
}

[eseguin3]

Thanks! I ended up doing something similar to what you did, para. I didn't have to call the resizeTo method twice, however. My code:


var northRegion = layout.getRegion('North');
var centerHeight = layout.getRegion('North').getActivePanel().getLayout()
.getRegion('center').panelSize.height;
var centerDiv = Ext.get('centerDiv');

//--------Events-----------
var toggleCenter= function() {
if (centerDiv.dom.style.display != 'none') {
centerDiv.dom.style.display = 'none';
var newH = northRegion.panelSize.height - centerHeight;
northRegion.resizeTo(newH);
} else {
centerDiv.dom.style.display = 'block';
var newH = northRegion.panelSize.height + centerHeight;
northRegion.resizeTo(newH);
}
}

I used display:none instead of hide(), because the panel I was trying to hide was a Center panel, which Ext won't hide.

[vaduros]

I had the same problem of hiding the center and east region and make the west region fill the browser canvas width on show():



var vdims = layout.getViewSize();
vwest.resizeTo(vdims.width);
vwest.show();


Thats works initially but when I resize the browser's width, the vwest region doesn't resize automatically (fitToFrame is set for vwest).

Any hint for a solution?