field set with column layout

Please take a look at the attached screenshot.

The code looks like this:

Code:

---

{
    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...

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.

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.

Can somebody help me?

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.

Okay, based on your suggestions I managed to simplify the code:

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?

So, what width is

Code:

---

        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.

More importantly, why do you still EMBED a column layout Panel within the FieldSet instead of making the FieldSet layout: 'column'????

Okay, I got it now. Thank you Animal. This is the final, working code:

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?

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...t.ColumnLayout