PDA

View Full Version : Best Practice for Columns on FormPanel



harley.333
25 Jun 2009, 9:29 AM
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
25 Jun 2009, 10:25 AM
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
26 Jun 2009, 5:53 AM
Thanks, Animal. I looked at the BoxLayouts, but I think Container is still the best for simple positioning.

Condor
26 Jun 2009, 6:00 AM
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
26 Jun 2009, 7:38 PM
1. Yeah, I did.
2. I noticed that and already took advantage.
3. I didn't know that - slick.