BorderLayout contained in DIV w/o height defined?

[ann0yanc3]

I have a simple layout define as follows...



layout = new Ext.BorderLayout(Ext.get("testcon"), {
north: {
titlebar: false
},
west: {
initialSize: 200,
titlebar: true,
},
south: {
titlebar: false
},
center: {
titlebar: true
}
});

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('south', new Ext.ContentPanel('south', 'South'));
layout.add('west', new Ext.ContentPanel('west', {title: 'Navigation'}));
layout.add('center', new Ext.ContentPanel('center', {title: 'Content'}));
layout.endUpdate();


The "testcon" DIV has the following CSS...


#testcon{
width:760px;
position:relative;
margin:20px auto;
}

The layout is completely messed up, and only displays 'north' properly. Setting the height property fixes the problem, of course. However, why can't the 'center' region auto-adjust its height with the height of its content? (no scrolling) I don't see why a height property is needed for the layout to display properly. Is there a work-around? Am I missing a property, or method within LayoutRegion, or ContentPanel?

Thanks.

[TommyMaintz]

First of all:



layout = new Ext.BorderLayout(Ext.get("testcon"), ...


can also be done as,



layout = new Ext.BorderLayout('testcon', ...



Most Ext's class constructors can be passed an element id, an Ext element or a browser element.

Second, i think your problem will be fixed with the property:
fitToParent wich Jack recently adding if im not mistaking.

If i am mistaking its probably the property fitToFrame.
Anyhow, this is all in the docs as far as i know.

You could also take a look at the Layout examples, in wich you can see all the used properties for making those layouts.

[brian.moeskau]

Hi ann0yanc3,

From the docs for the BorderLayout constructor (container parameter):


The container this layout is bound to
E.g., by passing 'testcon' as the container, you must give 'testcon' some kind of sizing for things to render as expected. To verify how this works, try changing your markup to this:


<div id="testcon" style="height:400px;width:400px;"> ...
You should now see that the BorderLayout is rendered into a 400/400 box (as expected). If the goal is to take up the entire page (most likely) then you should render to the document body as all the examples do:


layout = new Ext.BorderLayout(document.body, { ...
Hope that helps.
Brian

[ann0yanc3]

Thanks for the tips, but I know about setting the height to get it to work. I was just hoping that I missed some property allowing the height of the containing DIV to not be needed. I guess it's impossible.

:(

[brian.moeskau]

I think you missed my point -- you are adding content into an absolutely positioned container element (Ext absolutely positions everything to make the BorderLayout work cross-browser consistently), so there is absolutely nothing that Ext can do for you generically regarding the size of your div. You will always have to supply height and width -- the framework can't make assumptions about how you want your div sized.

Also, I was just making sure that you weren't rendering to a div if your intention really was to fill the entire document -- wanted to make sure that wasn't an oversight :)

[ann0yanc3]

Yea, I figured that it boiled down to everything having an absolute width and height. Thanks again for your help.