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

У меня есть форма с динамически добавляемыми полями (разного размера). Я хотел бы поместить несколько полей формы в набор полей и иметь границу набора полей, достаточно большую, чтобы содержать все поля.

Вот (уродливый) пример, который показывает проблему:

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();

Вот как это выглядит: alt text

Мне заранее не известна ширина содержащихся полей, поэтому я не могу указать ширину.

Спасибо за любые предложения.


person Gerrat    schedule 22.11.2010    source источник


Ответы (2)


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

person wombleton    schedule 23.11.2010
comment
Спасибо. Я не хочу, чтобы они располагались равномерно, мне нужна меньшая граница набора полей. - person Gerrat; 23.11.2010

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

Теперь он показывает, как хотелось!

person Gerrat    schedule 24.11.2010