How to adjust ExtJS textfield width according to its container

Question

I use ExtJS version 4.2.1, and I have a table layout.

     Ext.create('Ext.panel.Panel', {
            width: 1300,
            height: 700,
            title: 'Table Layout',
            layout: {
                type: 'table',
                columns: 3,
                tdAttrs:
                    {
                        width: 500,
                    }
            },
            items: [
                {
                    fieldLabel: 'Text1',
                    xtype: 'textfield',
                },
                {
                    fieldLabel: 'Text2',
                    xtype: 'textfield',
                },
                {
                    fieldLabel: 'Text3',
                    xtype: 'textfield',
                },
                {
                    fieldLabel: 'Text4',
                    xtype: 'textfield',
                },
                 {
                     fieldLabel: 'Text5',
                     xtype: 'textfield',
                 },
                {
                    fieldLabel: 'Text6',
                    xtype: 'textfield',
                }],
            renderTo: Ext.getBody()
        });

and the result is: each column width is 500px and I want to each textfield's width adjust with its container. somehow a autoWidth,But it doesn't now.

Answer 1

Add width in percents to the textfields:

Ext.create('Ext.panel.Panel', {
    width: 1300,
    height: 700,
    title: 'Table Layout',
    layout: {
        type: 'table',
        columns: 3,
        tdAttrs: {
            width: 500,
        }
    },
    defaults: {
        width: '95%'
    },
    items: [
         // ...
    ],
    renderTo: Ext.getBody()
});