如何根据容器调整ExtJS文本字段宽度

Question

我使用ExtJS版本4.2.1,我有一个表格布局.

     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()
        });

结果是: 每列宽度为500px,我希望每个文本字段的宽度与其容器一起调整.某种程度上是一个autoWidth,但现在还没有.

Answer 1

为文本字段添加百分比宽度:

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()
});