PDA

View Full Version : field set with column layout



TheMonolith
26 Feb 2010, 6:30 AM
Please take a look at the attached screenshot.

The code looks like this:



{
xtype:"fieldset",
title:"Farbe",
autoHeight:true,
items:
[{
layout:"column",
items:
[{
columnWidth:0.2,
items:
[{
xtype:"form",
title:"",
hideBorders: true,
items:
[{
xtype:"numberfield",
fieldLabel:"C",
border: false,
bodyBorder: false,
name:"numbervalue",
width:50
}]
}]
}]
}]
}

There are two problems:

1) The text field width is not 50% of the field set width. Why not? After all, I included columnWidth:0.5.

2) Why are the borders of the inner form panel still shown? I mean seriously, I used all border-related properties and gave them values that should get rid of them.

P.S. I have spent the last 3 hours on this...

tvanzoelen
26 Feb 2010, 6:34 AM
I never use such notation but you use a form within a fieldset?? First make a form, give it a column or table layout, than add your fieldsets.

TheMonolith
26 Feb 2010, 6:44 AM
But

* I need one field set within a form panel
* the field set should have several columns, hence column layout
* but because the column layout doesn't display field labels for its components, each column must contain a form panel (because it DOES display field labels for its components)
* and these inner form panels (in the listed example it is just one) get a text field each

It is the only way I have found so far that might to what I want it to do.
But if I have misunderstood your explanation, please correct me.

TheMonolith
28 Feb 2010, 12:51 AM
Can somebody help me?

Animal
28 Feb 2010, 5:42 AM
That's not a FieldSet with a column layout though is it now?

Read it.

It's Fieldset with no layout (And the docs tell you what that means) which contains a Panel which uses column layout.

TheMonolith
1 Mar 2010, 1:33 AM
Okay, based on your suggestions I managed to simplify the code:



{
xtype:"fieldset",
title:"Legend",
autoHeight:true,
items:
[{
xtype:"panel",
title:"",
layout:"column",
items:
[{
xtype:"form",
title:"",
columnWidth:0.5,
items:
[{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue"
}]
}]
}]
}

Now the second problem is solved because the borders disapper when I specify "border: false".

The first problem persists however. As you can see in the new screenshot that I have attached, the text field is much wider than the specified 20% ("columnWidth: 0.2"). Why?

Also, why is columnWidth not listed in the API documentation of Class Ext.Panel?

Animal
1 Mar 2010, 1:57 AM
So, what width is



xtype:"panel",
title:"",
layout:"column",



supposed to be to calculate the 0.5 column width? Your code has ("0.5", not "0.2")

YOU ALWAYS need to specify a layout if you want sizing.

That is repeated over and over and over again in the docs.

Animal
1 Mar 2010, 1:58 AM
More importantly, why do you still EMBED a column layout Panel within the FieldSet instead of making the FieldSet layout: 'column'????

TheMonolith
1 Mar 2010, 2:09 AM
Okay, I got it now. Thank you Animal. This is the final, working code:


{
xtype:"fieldset",
title:"Legend",
autoHeight:true,
layout:"column",
items:
[{
xtype:"form",
title:"",
width: "50%",
items:
[{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue"
}]
}]
}One more question: Why can I not find the columnWidth property anywhere in the API documentation? Has it been removed or renamed in Ext JS 3.x?

Animal
1 Mar 2010, 2:46 AM
It is not a config option of any Component. It's a "hint" which is only read by the column layout class.

http://www.extjs.com/deploy/dev/docs/?class=Ext.layout.ColumnLayout