FieldLabel problem in fieldset with columnlayout

[nicobarten]

Hi all.

I have a fieldset with a column layout. In the fieldset i have 2 columns, with each a formpanel, which again contains the form items. In column 1 i use form items like combo's and textfields which uses fieldlabels, this all works well. However, in column 2 i need form items like combo's WITHOUT a fieldlabel. I tried a displayField and a textarea, and although they are rendered at the correct height, there is a 'gap' (space of around 100-200px i guess) at the left of the items. What i want is this space to be removed, so the items (the displayfield and textarea) go further to the left.

Code:

                xtype: 'fieldset',
                layout: 'column',
                title: 'Uren',
                items: [
                {
                    xtype: 'panel',
                    layout: 'form',
                    border: true,
                    width: 290,
                    items: [
                    {
                        xtype: 'combo',
                        store: new Ext.data.ArrayStore(
                        {
                            fields: ['bedrijfsnaam'],
                            data: [['Microsoft'],['KPN'],['Vodafone'],['Eneco']]
                        }),
                        value: 'Microsoft',
                        valueField: 'bedrijfsnaam',
                        displayField: 'bedrijfsnaam',
                        mode: 'local',
                        triggerAction: 'all',
                        fieldLabel: 'Bedrijf',
                        width: 150
                    },
                    {
                        xtype: 'combo',
                        store: new Ext.data.ArrayStore(
                        {
                            fields: ['urensoort'],
                            data: [['Declarabel'],['Verlof'],['Bijzonder'],['Ziek'],['Tandarts'],['Huisarts']]
                        }),
                        value: 'Declarabel',
                        valueField: 'urensoort',
                        displayField: 'urensoort',
                        mode: 'local',
                        triggerAction: 'all',
                        fieldLabel: 'Urensoort',
                        width: 150
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Van',
                        width: 150
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Tot',
                        width: 150
                    }]
                },
                {
                    xtype: 'panel',
                    layout: 'form',
                    border: true,
                    items: [
                    {
                        xtype: 'displayfield',
                        value: 'Omschrijving:'
                    },
                    {
                        xtype: 'textarea',
                        width: 200
                    }]
                }]

See the attached thumbnail for the problem.

[attu]

Hi!

You might use the property

hideLabel:true,

in your textarea.
Bye!

[dommellenny]

hi,
attu is right,
but also use

hidelabel: true,

in your displayfield
and they will both be nicely placed aside the other formObjects

[nicobarten]

wow, how could i miss that!

Thank you very much!

[Animal]

Or simple do not use

                    layout: 'form',

In that second column. It's the form layout which does that.

Also, do not use Panels as the columns. Use xtype: 'container' (And apply a class to get the border that you want)