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

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