javascript - 在 ExtJS 中，如何将两个字段集并排放置在具有 hbox 布局的面板中？

Question

在 ExtJS 中，我在使用 hbox 布局并排放置两个字段集时遇到了一些麻烦。 hbox 布局似乎不知道字段集的高度，并将其切断，即使我明确将面板的高度设置为较大的值也是如此。

这是它的样子:

蓝色边框是 hbox 面板，里面有 2 个字段集，'Client Info' 和 'Owner Info'。代码如下(在 Firebug 中简化并可运行):

var clientInfo = {
    xtype: 'fieldset',
    defaultType: 'textfield',
    title: 'Client Info',
    items:
    [
        { fieldLabel: 'First Name' },
        { fieldLabel: 'Last Name' },
        { fieldLabel: 'Cell Phone #' },
        { fieldLabel: 'Work Phone #' }
    ]
};

var ownerInfo = {
    xtype: 'fieldset',
    defaultType: 'textfield',
    title: 'Owner Info',
    items:
    [
        { fieldLabel: 'First Name' },
        { fieldLabel: 'Last Name' },
        { fieldLabel: 'Cell Phone #' },
        { fieldLabel: 'Work Phone #' }
    ]
};

new Ext.Panel({
    layout: 'hbox',
    frame: true,
    height: 400,
    width: 800,
    defaults: { flex: 1 },
    items: [ clientInfo, ownerInfo ]
}).render(document.body);

附言如果您删除 defaults: { flex: 1 }，字段集会正确呈现，但不会自动调整大小以适应容器，这是我需要的。

有人知道如何解决这个渲染问题吗？谢谢。

Answer 1

在你的字段集中尝试 autoHeight: true。

另一种选择可能是列布局，其中每列的可用宽度为 50%。