PDA

View Full Version : [CLOSED][3.0.x r5172] Panel/Container autoHeight doesn't work when using hbox layout



tookoo
20 Aug 2009, 2:15 PM
Ext version tested:

Ext 3.0.x rev 5172


Adapter used:

ext


css used:

only default ext-all.css




Browser versions tested against:

IE8
FF3.5 (firebug 1.4.2 installed)
Google Chrome 3


Operating System:

WinXP Pro


Description:

It appears that when an hbox layout is used inside an Ext Panel/Container and its height is not set explicitly, the Panel/Container cannot adjust its height based on its child components even if its autoHeight property is set to true.

The column layout inside an Ext Panel/Container works fine.


Test Case:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ext3/resources/css/ext-all.css">
<script type="text/javascript" src="ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3/ext-all-debug.js"></script>
<title id="page-title">Vorne Test</title>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext3/resources/images/default/s.gif';

Ext.onReady(function() {

var panel = new Ext.Container({
title: 'Vorne Test',
//height: 100,
autoHeight: true,
layout: {
type: 'hbox',
align : 'stretch',
pack : 'start',
},
items: [{
title: 'panel 1',
flex:1,
html: 'panel 1'
},{
title: 'panel 1',
html:'panel 2',
width:150
}, {
title: 'panel 1',
html:'panel 3',
flex:2
}],
renderTo: Ext.getBody()
});

//var panel = new Ext.Panel({
// title: 'Vorne Test',
// layout:'column',
// items: [{
// title: 'panel 1',
// columnWidth:0.7,
// html: 'panel 1'
// },{
// title: 'panel 1',
// html:'panel 2',
// width:150
// }, {
// title: 'panel 1',
// columnWidth:0.3,
// html:'panel 3'
// }],
// renderTo: Ext.getBody()
//});
});
</script>
</head>
<body>
</body>
</html>




Screenshot or Video:

n/a


Debugging already done:

From firebug, it appears that the child components have been generated, but not displayed.


Possible fix:

not provided

evant
20 Aug 2009, 2:22 PM
This is the expected behaviour. The hbox layout is different to the column layout, it needs some kind of height to size correctly. The same applies to vbox (it requires a width).

Marking this as closed.

tookoo
20 Aug 2009, 3:13 PM
This is the expected behaviour. The hbox layout is different to the column layout, it needs some kind of height to size correctly. The same applies to vbox (it requires a width).

Marking this as closed.
I don't understand why it is the expected behavior.

I can certainly understand why the width of the parent is necessary for laying out children using hbox. Can you elaborate why the height is also necessary? Thanks.

If you take a look at how Adobe Flex defines hbox, http://livedocs.adobe.com/flex/3/langref/mx/containers/HBox.html. You don't need to specify a height of the container to display its children.

"The width is large enough to hold all its children at the default or explicit width of the children, plus any horizontal gap between the children, plus the left and right padding of the container. The height is the default or explicit height of the tallest child, plus the top and bottom padding for the container. "

evant
20 Aug 2009, 3:49 PM
It's just like any other layouts that size dimensions.

Under the hood, hbox uses absolute positioning so it needs to have dimensions.

Animal
20 Aug 2009, 11:05 PM
The whole premise of this thread is a misunderstanding.

The OP has made the Container autoheight: true

Which is meaningless. The Container's layout sizes its child items. And since he's used align: 'stretch', this is asking it to size all child items to its configured height (or the height set bt its Container)

Animal
20 Aug 2009, 11:10 PM
This is not being asked to size the height of its child items, so they are displayed fine.



var panel = new Ext.Container({
title: 'Vorne Test',
autoHeight: true,
layout: {
type: 'hbox'
},
items: [{
title: 'panel 1',
flex:1,
html: 'panel 1<br><br><br>another line'
},{
title: 'panel 1',
html:'panel 2',
width:150
}, {
title: 'panel 1',
html:'panel 3',
flex:2
}],
renderTo: Ext.getBody()
});

tookoo
21 Aug 2009, 7:10 AM
Animal, thanks for the clarification. Yes, the "strech" should not be used in the layout configuration.

I also try your example, which works fine in Firefox 3.5, but nothing is displayed in IE8.