试图在表格布局中拉伸组件

Question

我有一个 3x2 的组件面板，看起来像这样：

它使用表格布局（我猜这是最适合这项工作的布局）。但是，当我加宽窗口时，内部组件不会拉伸：

我的代码如下所示：

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

如您所见，我正在使用表格布局。它似乎将组件像砖一样放置，没有任何拉伸规则。这种情况有更好的布局吗？我在想也许 hBox 有三个面板，然后在面板内你会有 vBox。但这似乎有点麻烦。

小提琴在这里：

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

Answer 1

您可以为每个项目使用带有 columnWidth 的列布局。 textfield 有一个标签，因此不需要单独的标签小部件。

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'
    }]
});

这是一个带有表格布局的解决方案，但它需要用表单布局容器包装每个字段。表单布局的主要目的是使字段拉伸到容器宽度。

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'
            }
        }]
    });