Как я могу заставить эту границу набора полей плотно обернуть ее содержимое

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

Хорошо, работает, изменяя некоторые свойства набора полей:
макет на 'table',
autoWidth на true,
добавление cls с 'float: left', (вставка этого в стиле не кажетсяв помощь)
и добавление фиктивного элемента для очистки значения с плавающей точкой:
{xtype: 'component', style: 'clear: both'}

Теперь оно отображается как нужно!

Answer 2

Не то, что вы просили, но добавление flex: 1 к значениям по умолчанию для набора полей делает поля расположенными равномерно в пределах набора полей.