how to auto resize a BorderLayout

[hicker]

hi i've a BorderLayout contains west and center panels. in west panel i've a menu and in center i open pages in tabs. i'm opening a page in center tab which has a BorderLayout with north and center panels. when i collapse west region of main borderlayout center tab's width is growing but the second borderLayout's width (which is in center tab) doesn't. i wonder does borderlayout has any property that resizes itself while its parent's size changing?

[BernardChhun]

you have to use a NestedLayoutPanel for the BorderLayout in your center region.

0.33 version

yourMainLayout.add('center', new YAHOO.ext.NestedLayoutPanel(yourSecondBorderLayoutReference));

1.0 alpha version

yourMainLayout.add('center', new Ext.NestedLayoutPanel(yourSecondBorderLayoutReference));

the NestedLayoutPanel will resize everything magically :wink:

[hicker]

thanks but i'm calling second layout dynamically with this code

addTab : function(){
if(panelLayout.getRegion('center').getPanel('page'+this.id)){
panelLayout.getRegion('center').showPanel('page'+this.id);
}else{
var newtab = new Ext.ContentPanel(panelLayout.getEl().createChild({tag:'div',id:'page'+this.id}),{title: this.name, fitToFrame:true, closable:true});
var newtabUpdater = newtab.getUpdateManager();
newtabUpdater.loadScripts = true;
newtabUpdater.indicatorText = defaultLoadingIndicator;
newtabUpdater.setDefaultUrl(this.file);
newtabUpdater.refresh();
panelLayout.add('center',newtab);
}
}

and the pages i call may have a borderlayout or not. so i can't add nested layout to first layout manager

[hicker]

hi,
i find a solution about this problem, so here it is:
first i've added these functions to Ext.ContentPanel

Ext.ContentPanel.prototype.convertToNested = function(layout){
this.layout = layout;
this.layout.monitorWindowResize = false; // turn off autosizing
this.layout.getEl().addClass("x-layout-nested-layout");
this.setSize = function(width, height){
if(!this.ignoreResize(width, height)){
var size = this.adjustForComponents(width, height);
this.layout.getEl().setSize(size.width, size.height);
this.layout.layout();
}
};
this.getLayout().layout();
layout.layout();
};
Ext.ContentPanel.prototype.getLayout = function(){
return this.layout;
};
here is the code for opening new tabs in first page

newtab = new Ext.ContentPanel(panelLayout.getEl().createChild({tag:'div',id:'page'+this.id}),{title: this.name, fitToFrame:true, closable:true, autoWidth:'auto'});
mainLayout.beginUpdate();
mainLayout.add('center',newtab);
newtab.monitorWindowResize = true;
var newtabUpdater = newtab.getUpdateManager();
newtabUpdater.loadScripts = true;
newtabUpdater.indicatorText = defaultLoadingIndicator;
newtabUpdater.setDefaultUrl(this.file);
newtabUpdater.refresh();
mainLayout.endUpdate();
and finally the code for the page which is being called into tabs of first page

innerPageLayout = new Ext.BorderLayout(newtab.el, {
north: {
split:false,
.
.
.
});
newtab.convertToNested(innerPageLayout);

if you are creating new content panels dynamically and calling other pages(that contains border layouts or simple html pages) in it, you can use this solution for converting tab's content panel to nested layout panel