PDA

View Full Version :  what's the difference between column layout and hbox layout?



lenlee
26 Feb 2015, 7:30 PM
In my opinion, they are same. they are both horizontal layout.Column layout uses columnWidth to divide a container into many parts, and hbox uses flex to divide. In fact, ColumnWidth and flex are the same with percentage.
After all, what's the condition can i use column layout or hbox layout?

glopes
26 Feb 2015, 7:58 PM
With column layout if you specify a fixed width for all your subcontainers and they exceed the width of the parent container, they will be placed below. This doesn't happen with hbox.

I think there are more differences than this, but I normally use column layout when I want the items that I add dynamically to be added in columns and then rows...


Try this:



Ext.create('Ext.Panel', {
title: 'Column Layout - Fixed',
width: 350,
height: 250,
layout:'column',
items: [{
title: 'Column 1',
width: 120
},{
title: 'Column 2',
width: 120
},{
title: 'Column 3',
width: 120
},{
title: 'Column 4',
width: 120
}],
renderTo: Ext.getBody()
});
Ext.create('Ext.Panel', {
title: 'Hbox Layout',
width: 350,
height: 250,
layout:'hbox',
items: [{
title: 'Column 1',
width: 120
},{
title: 'Column 2',
width: 120
},{
title: 'Column 3',
width: 120
},{
title: 'Column 4',
width: 120
}],
renderTo: Ext.getBody()
});