extjs - 我怎样才能让这个字段集边框紧紧地环绕它的内容

Question

我有一个动态添加字段（不同大小）的表单。我想在一个字段集中放置一些表单字段，并让字段集边框足够大以包含所有字段。

这是一个显示问题的（丑陋的）示例：

var win = new Ext.Window({
    xtype: 'form',
    layout: 'form',
    height: 200,
    width: 500,
    title: 'Testing',
    items: [{
        xtype: 'fieldset',
        layout: 'hbox',
        autoHeight:true,
        autoWidth: false,
        title: 'Fieldset',
        defaults: {
            border: false,
            layout: 'form',
            labelAlign: 'top',
            labelSeparator: ''
        },
        items: [{
            items: new Ext.form.TextField({
                fieldLabel: 'Col1',
                name: 'col1',
                value: 'nothing',
            })
        }, {
            items: new Ext.form.TextField({
                fieldLabel: 'Col2',
                name: 'col2',
                value: 'something'
            })
        }]
    }, 
        new Ext.form.TextField({
            fieldLabel: 'Col3',
            name: 'col3',
            value: 'anything'
        })
    ]
}).show();

这是它的样子：

我不会事先知道包含字段的宽度，所以我不能指定宽度。

感谢您的任何建议。

Answer 1

不是您要求的，但是添加flex: 1到字段集的默认值会使字段在字段集的范围内均匀排列。

Answer 2

好的，通过更改一些字段集属性来工作：
布局为'table'，
autoWidth为true，
添加一个带有'float：left'的cls，（将其放入样式似乎没有帮助）
并添加一个虚拟元素以清除浮动:
{ xtype: '组件', 风格: 'clear:both' }

它现在按需要显示！