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

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


蓝色边框是 hbox 面板，里面有 2 个字段集，“客户信息”和“所有者信息”。代码如下(在 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 } ，字段集会正确呈现，但不会自动调整大小以适应容器，这是我需要的。
有人知道如何解决这个渲染问题吗？谢谢。

最佳答案

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

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

关于javascript - 在 ExtJS 中，如何在具有 hbox 布局的面板中并排放置两个字段集？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2374440/