如何让这个fieldset边框紧紧包裹它的内容

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

好的，通过更改一些字段集属性来工作：
布局到'表'，
autoWidth为true，
添加一个带有'float：left'的cls，（将它放入样式似乎没有帮助）
并添加一个虚拟元素来清除浮动：
    {         xtype：'component'，         风格：'清晰：两者'     }

现在可以根据需要显示！