PDA

View Full Version : Forms with columns?



Bucs
27 Jul 2010, 5:29 PM
What is the best way to layout a form with columns? I copied the downloaded form example I saw (which was weak imo) and then was scolded int the forum for overnesting.

Can anyone provide a better example that demonstrates the "proper" way to accomplish a form with columns? There has to be many people doing this, no way I am the first. Yet a forum search yields very few results.

Thanks in advance.

j-joey
28 Jul 2010, 11:57 AM
- put a formpanel
- change formpanels layout to column layout
- add panels as many as you need as columns
- set each column panels columnWidth property
- set column panels layout to form
- add fields to columns...

thats all

Bucs
28 Jul 2010, 12:07 PM
Thanks, but I don't think that is the best way to do it anymore with the hbox layout now available. Your way includes a lot of unnecessary panel overhead imo, plus you don't get the benefit of the automatically sized columns that the hbox layout provides.

I think the answer is to use a form panel with hbox layout and then include sub-containers with desired flex values set...and have each sub-container's layout set to form.

FCTim
28 Jul 2010, 12:21 PM
Talk about overnesting.... My requirements are to have two lines of fields with labels that can be adjusted using hbox layout and this is the best I could come up with.... This code is from a function that creates line items dynamically...



return new Ext.Container({
layout : 'form',
hidden : true,
hideMode : 'offsets',
defaults : {
xtype : 'container',
layout : 'hbox',
defaults : {
xtype : 'container',
layout : 'form',
labelWidth : 100,
labelSeparator : '',
labelAlign : 'top',
margins : {top:0, right:10, bottom:0, left:0}
}
},
items : [
{
items : [
{
items : [
{
xtype : 'textfield',
ref : '../../carrierCode',
fieldLabel : 'Carrier',
autoCreate : {
tag : 'input',
type : 'text',
maxlength : '13'
}
}]
},
{
items : [
{
xtype : 'textfield',
ref : '../../bolNumber',
fieldLabel : 'BOL Number',
autoCreate : {
tag : 'input',
type : 'text',
maxlength : '13'
}
}]
}]
},
{
items : [
{
items : [
{
xtype : 'textfield',
ref : '../../bolNumber',
fieldLabel : 'BOL Number',
autoCreate : {
tag : 'input',
type : 'text',
maxlength : '13'
}
}]
},
{
items : [
{
xtype : 'textfield',
ref : '../../importCodeDesc',
fieldLabel : 'Import Cost Description',
autoCreate : {
tag : 'input',
type : 'text',
maxlength : '15'
}
}]
}]
}]
});

Bucs
28 Jul 2010, 12:26 PM
You lost me on that one. Not sure how that pertains to the best way to produce a column form layout. That looks narly ;)

Seems like you would want some type of nested mixture of hbox and vbox layouts.

FCTim
28 Jul 2010, 12:29 PM
I seemed to have skipped your original post and went with your reply that you wanted to use Hbox instead of Column layout.

Bucs
28 Jul 2010, 12:38 PM
No worries. I learned something about ref and autoCreate reading your code :)

jarrednicholls
29 Jul 2010, 4:48 AM
I think the answer is to use a form panel with hbox layout and then include sub-containers with desired flex values set...and have each sub-container's layout set to form.

This is the preferred way. I recommend using Containers over Panels if possible, you will have fewer DOM nodes as a result and layout management happens faster.

Bucs
29 Jul 2010, 4:54 AM
Thanks Jarred. But the outer container should still be a form panel correct? I would still need a title, collapsability, and the ability to POST the main form, will all contained fields in form layouts...and perform form functions across all fields. I can't do any of that if the outer container is merely a container.

jarrednicholls
29 Jul 2010, 5:09 AM
I wasn't suggesting that the outer container be a "Container", just the components acting as the columns. Of course you can/should keep the FormPanel for all the reasons you mentioned. I was speaking to Joey's first reply specifically. His model would work too, and the columnWidth can be a %, and thus can be flexible like hbox is. But I would use Containers not Panels, that's all.