PDA

View Full Version : Fields layout in FormPanel



pantarhei
5 Jun 2008, 6:22 AM
Hello,

i'm just trying to get my fileds arranged in a form panel. but it isn't working as expected.
are there any examples out there how to arrange fields in a fieldset with column layout within a form panel?

how hart would it be to create something like this?

http://img111.imageshack.us/img111/4972/dummydl3.th.png (http://img111.imageshack.us/my.php?image=dummydl3.png)

any hints? tutorials? examples?

regards

Hon
5 Jun 2008, 6:38 AM
There's one example with two columns.

Ext form examples (http://www.extjs.com/deploy/dev/examples/form/dynamic.html)

Maybe you can use that as your starting point.

Hope it helps a bit :)

sinma
5 Jun 2008, 6:45 AM
You have an example here: http://examples.extjs.eu/ into Form - Fieldsets In 2 Columns Layout section.

pantarhei
5 Jun 2008, 6:53 AM
thank you both. but these are samples where the fields within the fieldset are still using form layout. i need the fields in column layout within the fieldset as you can see in the screenshot.

Hon
5 Jun 2008, 7:11 AM
Ok, I understand you perfectly for I have found myself in the same situation not long ago.

I am using the "Form 3" example for this brief explanation.

Taking look into the code, there are several things that should attract your attention, in particular:



items: [{ // Here starts the first element in the GLOBAL panel
layout:'column', // As you see, this first element is a COLUMN panel
items:[{ // Here starts the first COLUMN (left column)
columnWidth:.5, // It takes 50% of the total width
layout: 'form', // And this column is rendered as a FORM panel
items: [{ // This is the first element in the FORM (left column)
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, { // This is the second element in the FORM (left column)
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{ // Here starts the second COLUMN (right column)
columnWidth:.5, // It takes 50% of the total width too
layout: 'form', // And this column is also rendered as a FORM panel
items: [{ // This is the first element in the FORM (right column)
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{ // This is the second element in the FORM (right column)
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{ // Here comes another element in the GLOBAL panel
I hope, now that we have been following this example together, everything is a little bit clearer for you.

Ops, I almost forget that this is what you may see here and there as "lazy instantiation" (if I am correct)

pantarhei
5 Jun 2008, 7:46 AM
thank you hon. but i think i understand in general what's going on. my problem is still that i can't add a column layout into a fieldset. adding fields with column layout to my form is no problem. perhaps i'm misunderstanding something.

here is what i try to do:




items: [{ //fieldset is 1st element in panel
xtype:'fieldset',
title: 'Test',
autoHeight:true,
defaults: {width: 100},
defaultType: 'textfield',
items :[{
columnWidth: .5,
layout: 'form',
items: [{ // This is the first element in the FORM (left column)
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, { // This is the second element in the FORM (left column)
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{ // Here starts the second COLUMN (right column)
columnWidth:.5, // It takes 50% of the total width too
layout: 'form', // And this column is also rendered as a FORM panel
items: [{ // This is the first element in the FORM (right column)
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{ // This is the second element in the FORM (right column)
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{ //column layout is 2nd element in panel
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
}]


result is this:
http://img209.imageshack.us/img209/568/extwc4.th.png (http://img209.imageshack.us/my.php?image=extwc4.png)

Hon
5 Jun 2008, 8:04 AM
Ok, I think I get it...

In the first element (the fieldset element) I don't see you are telling the renderer to create the object with the column layout.

Ok, not clear enough? I know. English is not my mother tongue, but I do my best.

Try and add:


layout: 'column',
in the element you design as a fieldset xtype.

I have not tried this myself, but I hope I am still able to help you.