PDA

View Full Version : [2.3] EasyColumnLayout



PierceSD
20 Nov 2009, 12:19 PM
A variation of Ext.layout.ColumnLayout, that requires less code and adds the following extra features:

Control over the placement order and tab order of the controls
Automatic gutters (i.e., spacing) between columns
Ability to fit the layout height to its parent container so that all the columns have matching height (borrowing an idea from Saki, I think)


Placing form fields side-by-side in Ext is a pain, especially if you want the tab order to go across the columns horizontally first, then down to the next row of fields, or if you only want two columns with one field in each column. A lot of nesting is required. For example:


...
{
xtype: "form",
items: [{
xtype: "container",
autoCreate: "div",
layout: "column"
items:[{
xtype: "container",
autoCreate: "div",
style: "padding-right: 2px", //for a 5px gutter
columnWidth: .5
layout: "form",
items: [{
xtype: "textfield",
name: "firstName",
fieldLabel: "First Name"
}]
}, {
xtype: "container",
autoCreate: "div",
style: "padding-left: 3px", //for a 5px gutter
columnWidth: .5,
layout: "form",
items: [{
xtype: "textfield",
name: "lastName",
fieldLabel: "Last Name"
}]
}]
}]
}
...


By contrast, EasyColumnLayout can do the same layout with roughly half as much code:



...
{
xtype: "form",
items: [{
xtype: "container",
autoCreate: "div",
layout: "easycolumn",
items: [{
xtype: "textfield",
name: "firstName",
fieldLabel: "First Name"
}, {
xtype: "textfield",
name: "lastName",
fieldLabel: "Last Name"
}]
}]
}
...


The above example relies on the defaults for gutter size, column count and column widths. The following example shows all the ways one can customize this layout.



...
{
xtype: "form",
items: [{
xtype: "container",
autoCreate: "div",
layout: "easycolumn",
layoutConfig: {
columns: 3,
vertical: false, //lay out horizontally first
autoTabIndex: 1, //automatically assign tab indexes
columnConfigs: [{
width: 100, //fixed width for first column
defaultType: "datefield",
}],
defaultColConfig: {
defaultType: "textfield"
}
gutterSize: 10, //10 pixels between columns
fitHeight: true //stretch to fit form's height
}
items: [
...
]
}
}
...


Code can be downloaded from here: http://extjs-ux.org/repo/authors/ceberle/trunk/Ext/ux/layout/EasyColumnLayout.js