PDA

View Full Version : Border Layout North region autoHeight issue



wallacer
30 Jun 2009, 10:31 AM
There's a thread on this problem from the Ext 2.0 forum here
https://extjs.com/forum/showthread.php?t=30445

I think I'm having the same problem, however their solution is not helping me.

I need the north region of my border layout to auto size itself to the contents of the html I load into it using the autoLoad config. Apparently the region calculates its size before loading its contents, so I have to force it to recalculate its size using syncSize(), and then calling doLayout() on the viewport. This doesn't seem to solve my problem however, and the north region does not resize itself to fit its contents. If I collapse any of the regions of the viewport, the north region resizes correctly, so there must be some method that gets called when that happens that I just need to call immediately after the contents of the north region load.

Any help would be greatly appreciated!



var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.get('container'),
width: 1280,
height: 800,
items: [{
region: 'north',
id: 'header',
xtype: 'panel',
autoLoad: {url: "./html/header.html", scripts: true},
autoHeight: true

},{

region: 'west',
xtype: 'treepanel',
split: true,
title: 'Navigator',
loader: treeLoader,
root: rootNode,
collapsible: true,
collapseMode: 'mini',
autoScroll: true,
bodyStyle:'padding:5px;',
frame: true,
width: 200,

},{
region: 'center',
xtype: 'tabpanel',
id:'main_tabs',
activeTab: 0,
enableTabScroll: true,
items: [{
title: 'Home',
autoLoad: {url: 'html/tab_home.html'}
}]

},{
region: 'east',
xtype: 'panel',
split: true,
layout: 'border',
width: 200,
collapsible: true,
collapseMode: 'mini',
items: [{
region: 'north',
frame: true,
title: 'Control Panel',
items: cPanel,
autoScroll: true,
height: 300
},{
region: 'center',
minHeight: 200,
//frame: true,
items: thumbPanel
}]


},{
region: 'south',
xtype: 'panel',
html: '&copy; <a href="http://www.avocet3d.com/">Avocet 3D Images Inc.</a> 2009 All Rights Reserved'
}]
});
viewport.getLayout().north.panel.syncSize();
viewport.doLayout();
I've also tried


var headerPanel = viewport.findById('header');
headerPanel.on('load', function(){headerPanel.syncSize();});
viewport.doLayout();and


var headerPanel = viewport.findById('header');
headerPanel.syncSize();
viewport.doLayout();Thanks!

tryanDLS
30 Jun 2009, 10:50 AM
You should not be giving viewport a height/width or renderTo. It will use the entire browser window and render to the body.

North region must have a height - the Viewport example shows an autoHeight config, but it's not documented and I don't know if it's truly supported.

wallacer
30 Jun 2009, 11:27 AM
Thanks for pointing out that I don't need sizes or renderTo for the viewport! Haha, oops.

I'm sure there must be a way for me to not have to specify a height for the north region. Like I said, it resizes itself correctly if I collapse and expand any of the regions in the viewport. There must be a way to force it to perform that resize after it has loaded the content? I thought syncSize and doLayout would handle that?

thanks for the response!

Any more help would be appreciated. I'll keep hunting and post a solution if I find one.