Best Practice for Columns on FormPanel

[harley.333]

I've recently started a new project using Ext 3.0. Is there anything new in regards to a FormPanel with columns?

I'm going to use code like this:


items: [
{
xtype: "panel",
layout: "column",
items: [
{
xtype: "panel",
columnWidth: .5,
layout: "form",
items: [
{
xtype: "textfield",
fieldLabel: "First Name"
}
]
},
{
xtype: "panel",
columnWidth: 5.,
layout: "form",
items: [
{
xtype: "textfield",
fieldLabel: "Last Name"
}
]
}
]
},
{
xtype: "panel",
layout: "column",
items: [
{
xtype: "panel",
columnWidth: .5,
layout: "form",
items: [
{
xtype: "textfield",
fieldLabel: "City"
}
]
},
{
xtype: "panel",
columnWidth: .2,
layout: "form",
items: [
{
xtype: "textfield",
fieldLabel: "State"
}
]
},
{
xtype: "panel",
columnWidth: .3,
layout: "form",
items: [
{
xtype: "textfield",
fieldLabel: "Zipcode"
}
]
}
]
}
]


Is this the best way?

[Animal]

I'd use



xtype: 'container',
autoEl: 'div'


In both cases.

If you don't need all the capabilities of a Panel (border, toolbars, header, footer, Buttons etc), then just an Ext.Container instance created on a <div> is lighter.

Also, check out the Ext 3.0 box layouts. The docs are enhanced in SVN, but not online. There are examples though in the examples directory.

HBoxLayout is similar to column. Except that it can fit the child containers to the height as well as %age width.

[harley.333]

Thanks, Animal. I looked at the BoxLayouts, but I think Container is still the best for simple positioning.

[Condor]

Thanks, Animal. I looked at the BoxLayouts, but I think Container is still the best for simple positioning.

1. I assume you meant ColumnLayout and not Container?
2. In Ext 3.0 autoEl:'div' is the default for Ext.Component, so you don't have to specify it for an Ext.Container.
3. ColumnLayout can span multiple rows, e.g.

layout: "column",
defaults: {
layout: "form"
},
items: [{
columnWidth: .5,
items: {
xtype: "textfield",
fieldLabel: "First Name"
}
},{
columnWidth: .5,
items: {
xtype: "textfield",
fieldLabel: "Last Name"
}
},{
columnWidth: .5,
items: {
xtype: "textfield",
fieldLabel: "City"
}
},{
columnWidth: .2,
items: {
xtype: "textfield",
fieldLabel: "State"
}
},{
columnWidth: .3,
items: {
xtype: "textfield",
fieldLabel: "Zipcode"
}
}]
(isn't this a lot more compact?)

[harley.333]

1. Yeah, I did.
2. I noticed that and already took advantage.
3. I didn't know that - slick.