PDA

View Full Version : [DEFER-1360] BoxLayout resizing



g2mac
22 Oct 2010, 2:18 PM
I want to understand this stuff with BoxLayout.
When we do 'hbox' or 'vbox' layout the method .calculateChildBoxes(...) called. And in this method I see:


...
//gather the total flex of all flexed items and the width taken up by fixed width items
for (i = 0; i < visibleCount; i++) {
child = visibleItems[i];
childHeight = child.height;
childWidth = child.width;
canLayout = !child.hasLayout && Ext.isFunction(child.doLayout);
...

But properties 'width' and 'height' don't changed after rendering the component. If I do something like child.setSize(newsizes) I change child.lastSize object only and after ownerCt.doLayout() I get wrong dimensions for 'innerCt' element (I mean .updateInnerCtSize(...) method of H|VBoxLayout).

Who can explain me why they don't use something like that:


...
//gather the total flex of all flexed items and the width taken up by fixed width items
for (i = 0; i < visibleCount; i++) {
child = visibleItems[i];
childHeight = child.lastSize ? child.lastSize.height : child.height;
childWidth = child.lastSize ? child.lastSize.width : child.width;
canLayout = !child.hasLayout && Ext.isFunction(child.doLayout);
...


??

Or why boxcomponent method .setSize() don't update properties 'height' and 'width' ?

Animal
22 Oct 2010, 11:34 PM
hbox layout does not necessarily update the height. It can be configured to do so using the align config, but by default, leaves it as auto or what is configured.

vbox layout does not necessarily update the width. It can be configured to do so using the align config, but by default, leaves it as auto or what is configured.

g2mac
23 Oct 2010, 1:47 AM
Probably this code helps to understand what I mean.
Run this and you'll see.


Ext.onReady(function() {
var cmp = new Ext.Viewport({
layout: 'border',
items: [{
region:'north',
split:true,
height:100,
layout: {
type: 'hbox',
padding:'5',
align:'top'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
width: 50,
height: 30,
text: 'Button 1'
},{
xtype:'button',
width: 50,
height: 30,
text: 'Button 2'
},{
xtype:'button',
width: 50,
height: 30,
text: 'Button 3'
},{
xtype:'button',
width: 50,
height: 30,
text: 'Button 4'
}]
},{
region:'center',
items: [{
xtype:'button',
text: 'btn1.SetSize(80,80)',
handler: function(btn){
btn.ownerCt.ownerCt.items.items[0].items.items[0].setSize(80,80);
btn.ownerCt.ownerCt.items.items[0].doLayout();
}
}]
}]
});
});

Animal
23 Oct 2010, 2:04 AM
Yes, I do see what you mean.

I'm not sure if this is intended behaviour or not.

It is always using the configured width property which setSize (or setWidth) does not overwrite. I thik your override would be a good one, to use the last explicitly set dimension if it is present.

I think you should report this as a bug. I'll look at the 4.0 code which is a very thorough design job and see if this has been fixed there.

meanwhile, if you overwrite the configured dimensions on resize, you get the effect you want:



Ext.onReady(function () {
var cmp = new Ext.Viewport({
layout: 'border',
items: [{
ref: 'north',
region: 'north',
split: true,
height: 100,
layout: {
type: 'hbox',
padding: '5',
align: 'top'
},
defaults: {
margins: '0 5 0 0'
},
items: [{
ref: '../btn1',
xtype: 'button',
width: 50,
height: 30,
text: 'Button 1'
}, {
xtype: 'button',
width: 50,
height: 30,
text: 'Button 2'
}, {
xtype: 'button',
width: 50,
height: 30,
text: 'Button 3'
}, {
xtype: 'button',
width: 50,
height: 30,
text: 'Button 4'
}]
}, {
region: 'center',
items: [{
xtype: 'button',
text: 'btn1.SetSize(80,80)',
handler: function (btn) {
cmp.btn1.setSize(80, 80);
cmp.btn1.width = cmp.btn1.height = 80;
cmp.north.doLayout();
}
}]
}]
});
});

Animal
23 Oct 2010, 2:12 AM
4.0 has a slight problem. Hbox does use the current width from a getSize() call on the child. But it still reads the configured height property from the child instead of the actual height.

I suspect Vbox does the same in the opposite dimension.

Something to remind Jamie of in the bug report. I think using lastWidth is a good idea.

g2mac
23 Oct 2010, 2:28 AM
At last)
Yeah, you have got it) Thanks, Animal!

I had overwritten .calculateChildBoxes(...) as I mentioned above.

meroy
25 Oct 2010, 4:46 PM
This is on the radar for 4.0.