View Full Version : Column layout - Best practices

19 Jun 2012, 1:58 PM
I'm working on a project where we have some panel objects that use a column layout where the total columnWidth values of all the items will total 2 or 3 and the object will display the items as multiple rows. This seems to work fine, but I just wondered if that was really a proper use of the column layout.

20 Jun 2012, 11:40 AM
When you use the column layout, you general use a percent to define your layout where 1 is full page. So if you have 3 even columns, then .33 will be used for all for example.

The alternative is to use hbox, and set each to flex: 1 for all to be even and flex: 2 has more weight and will be twice as wide.

Layouts are subject to your needs. If it works for you, then it is fine.
columns is an older approach.

If this does not answer your question, please elaborate.


20 Jun 2012, 12:04 PM
Basically our code would look like this:

xtype: 'panel',
layout: 'column',
items: [{
columnWidth: 0.5,
html: 'row 1 cell 1'
columnWidth: 0.25,
html: 'row 1 cell 2'
columnWidth: 0.25,
html: 'row 1 cell 3'
columnWidth: 0.4,
html: 'row 2 cell 1'
columnWidth: 0.6,
html: 'row 2 cell 2'

And we end up with 2 rows displaying. As I said this works fine for us. Just wondered if it was "breaking the rules".

20 Jun 2012, 12:20 PM
You may also want to look at the layout: 'table'