Trying to stretch component in table layout

Question

I have a 3x2 panel of components that looks like this :

It uses table layout (I am guessing this is the best layout for the job). However when I widen the window the inner components do not stretch :

My code looks like this :

v = Ext.create('Ext.window.Window', {
        renderTo: document.body,

        layout: {
            type: 'table',
            columns: 3,
            tdAttrs: { style: 'padding: 3px;' }
        },

        items: [
            {
                xtype: 'label',
                text: 'Field 1'
            },
            {
                xtype: 'label',
                text: 'Field 2'
            },
            {
                xtype: 'label',
                text: 'Field 3'
            },
            {
                xtype: 'textfield'
            },
            {
                xtype: 'textfield'
            },
            {
                xtype: 'combobox'
            }
        ]
    }
);
v.show()

As you can see I am using the table layout. It seems to place the components like bricks, without any stretching rules. Is there a better layout for this situations? I was thinking of maybe hBox with three panels, and then inside the panels you would have vBox. But that seems a bit cumbersome.

fiddle is here :

http://jsfiddle.net/dxyxudds/2/

Answer 1

You can use column layout with columnWidth for each item. textfield has a label, so no need for separate label widgets.

Ext.create('Ext.window.Window', {
    renderTo: document.body,
    height: 100,
    width: 500,
    autoShow: true,
    shadow: false,
    layout: 'column',
    defaults: {
        labelAlign: 'top',
        xtype: 'textfield',
        columnWidth: 0.33,
        padding: 5
    },
    items: [{
        fieldLabel: 'Field 1'
    }, {
        fieldLabel: 'Field 2'
    }, {
        fieldLabel: 'Field 3'
    }]
});

Here is a solution with table layout, but it requires wrapping each field with a form layout container. Form layouts primary purpose is to make fields stretch to container width.

Ext.create('Ext.window.Window', {
        renderTo: Ext.getBody(),
        height: 170,
        width: 400,
        autoShow: true,
        layout: {
            type: 'table',
            columns: 3,
            tdAttrs: {
                style: 'width: 33%'
            }
        },
        defaults: {
            xtype: 'container',
            layout: 'form',
            padding: 5,
            defaults: {
                xtype: 'textfield',
                labelAlign: 'top'
            }
        },
        items: [{
            items: {
                fieldLabel: 'Field 1'
            }
        }, {
            items: {
                fieldLabel: 'Field 2'
            }
        }, {
            items: {
                xtype: 'combobox',
                fieldLabel: 'Field 3'
            }
        }, {
            items: {
                fieldLabel: 'Field 4'
            }
        }, {
            items: {
                fieldLabel: 'Field 5'
            }
        }, {
            items: {
                xtype: 'combobox',
                fieldLabel: 'Field 6'
            }
        }]
    });