PDA

View Full Version : [CLOSED][3.0rc2] extra nested hbox leads to incorrect width



bobthebuilder
26 Jun 2009, 11:17 AM
Ext version tested:

Ext 3.0 RC2


Browser versions tested against:

IE8
FF3.0.11

Operating System:

Vista


Description:

Widths of items 1 and 2 are not determined by the width of item 3. Item 4's width is determined
by the width of item 5. The only difference is that item 1 is an extra nested hbox.

See screenshot


Test Case:






Ext.onReady(function(){
var n = 1;

var getVboxItem = function(){
return {
title: 'Item ' + n++,
layout: {
type: 'vbox'
},
items: [
{
width: 100,
title: 'Item ' + n++, // Items 3, 5
html: 'text goes here'
}
]
};
};

var getVbox = function(){
return {
defaults: {
//xtype: 'container',
flex: 1 // distribution vertically
},
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
getVboxItem()
]
};
};

var getWindowItem = function(){
return {
title: 'Item ' + n++, // Item 1
defaults: {
// no flex
},
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
getVboxItem() // item 2
]
};
};

new Ext.Panel({
title: 'test layout',
height: 400,
width: 400,
renderTo: document.body,
defaults: {
//xtype: 'container',
// no flex
},
layout: {
type: 'hbox',
align: 'stretch' // stretch it vertically
},
items: [
getWindowItem(), // item 1
getVboxItem() // item 4
]
});
});

The result that was expected:

I would expect that the width of panel items 1 and 2 is determined by the given fixed width of panel item 3.


The result that occurs instead:

The width of panel items 1 and 2 seem to be determined by the title text of panel 1.
Also, on IE 8 there is an incorrect height as indicated in the screenshot


Screenshot or Video:

attached


Debugging already done:

none


Possible fix:

not provided

evant
26 Jun 2009, 3:47 PM
I think you're going about this the wrong way. Ext Components/Containers work with the parent item sizing the children, not the other way round. Also, in your test case you don't see to use the getVBox function. I'm not sure if this was on oversight or left there to demonstrate something. What kind of layout were you trying to achieve?

bobthebuilder
26 Jun 2009, 4:44 PM
Hi Evant,

Yes, I think I am thinking about it the wrong way.

I'm actually trying to draw a diagram using 'component' instead of panel. mjlecomte (http://extjs.com/forum/member.php?u=6834) suggested that I use panel so that it was easier to see what was going on.

I am going to be dynamically adding rows (Items 3,5) depending on how many things I want to display. If I use fixed width on relevant parent containers, which I think is fine, then I think width will work. I am more concerned about height. As well as additional item 3s, there will also be additional item 2s with their own children. The heights need to be whatever the minimum needed to display the item 3s is. Perhaps I will have to calculate the height programmatically and set it when I add/remove item 3s and 2s.

This all started with this thread:

http://extjs.com/forum/showthread.php?t=72347#9

I apologise for starting what has turned out to be another 'help me' thread. I did think that it was a bug.

evant
26 Jun 2009, 5:07 PM
FYI there a few fixes that went in after RC2 related to stretching the heights/widths on hbox/vbox respectively. So these may be resolved. Anyway, going to mark this one as closed. Thanks for the detailed report, btw :)