PDA

View Full Version : Hbox layout problem - flex setting prevents layout from calculating height



nugatto
29 Feb 2012, 1:29 AM
Hi all.

This one has been bugging me for a long time and since I found no solution on this forum I have decided to ask for your help, guys.
Let's say I have a simple panel containing hbox layout with two panels inside. One of the panels inside hbox layout has dynamic content and therefore dynamic height:



var testPanel = new Ext.Panel({
title: 'test panel',
renderTo: 'test',
items: [{
layout: {
type: 'hbox'
},
items:[{
title: 'static panel',
width: 200,
html: 'lorem ipsum'
},{
title: 'dynamicContentPanel',
ref: '../dynamicContentPanel',
items: [{
title: 'subpanel',
html: 'lorem ipsum'
},{
title: 'subpanel',
html: 'lorem ipsum'
}]
}]
}],
buttons: [{
text: 'add subpanel',
scope: this,
handler: function(){
testPanel.dynamicContentPanel.add({
title: 'subpanel',
html: 'lorem ipsum'
});
testPanel.doLayout();
console.log('subpanel added...');
}
}]
});


Layout in this example works almost fine, because adding another subpanel to dynamicContentPanel adjusts height of dynamicContentPanel to all child components exept the last one added. That's problem #1.
Problem #2 is even more annoying and important. I want to take advantage of the flex ability of the hbox layout:


...
title: 'dynamicContentPanel with flex:1',
ref: '../dynamicContentPanel',
flex: 1,
...

Adding flex option causes dynamicContentPanel to set height to 1 pixel and forcing layout with doLayout() method gives me nothing. Same problem occures when I try to use align: 'stretchmax' layout option.
I use no doctype in my document as recomended.
The online example of the code is here (http://dl.dropbox.com/u/48750986/samples/tests/hbox.html).
Does anyone know solution to these problems?

mitchellsimoens
29 Feb 2012, 6:28 AM
The box layouts don't support auto sizing. It must either have height/width/flex set and/or something like align set in the layout config.