Going South...

[Molamini]

Why does the 'autoHeight:true' seem to fail in the code below?


//the following code
//does not display the bottom 2 panels
//with text, 'in the center south', and
//'in the deep south'

Ext.onReady(function()
{
var vp = new Ext.Viewport(
{
renderTo: document.body,
title: "Testing with Title",
layout: 'border',
autoHeight: true,
items:
[
{
region: "south",
xtype: 'panel',
//title: "to the south",
layout: 'border',
autoheight: true,
items: [
{
region: 'center',
//height: 200,
width: 300,
autoHeight: true,
html: 'in the center south'
},
{
region: 'south',
//height: 200,
width: 300,
autoHeight: true,
html: 'in the deep south'
}]
},
{
region: 'center',
html: "I am in the center"
}]
});
});

[tomcheng76]

you have to specify the height for north, south region and width for east,west region.
don't use autoheight.
size of center region will be calculated automatically based on other region.

[Molamini]

Let's say I dynamically load html content of varying size. How do I know to adjust the width and height appropriately if autoHeight should be avoided?

Molamini

[jay@moduscreate.com]

Please use Code tags in the future.

[Molamini]

I talked to a colleague and he suggested using an invisible <IFRAME> to place the content, get the size of the <IFRAME> and then use those values to set the width and height of a panel.

I don't know if this works (yet) but I'd at least like to offer a suggestion.

M

[tomcheng76]

sometimes i use "clientWidth" etc in javascript to help me calculate the new size.
you can inspect the dom element via firebug html => dom tab.
be careful those attributes may have different meaning across different browsers.