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

【问题标题】：How to adjust ExtJS textfield width according to its container如何根据容器调整 ExtJS 文本字段的宽度
【发布时间】：2014-07-07 07:33:51
【问题描述】：

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

结果是：每列宽度为 500 像素，我想使用其容器调整每个文本字段的宽度。不知何故是自动宽度，但现在没有。

【问题讨论】：

标签： extjs extjs4 extjs4.2

【解决方案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()
});

【讨论】：