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

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

Ok, работает путем изменения некоторых Fieldset свойства:
расположение к «столу»,
Автоширина истинно,
добавив с CLS «поплавком: слева», (положить это в стиле, кажется, не помогает)
и добавление фиктивного элемента, чтобы очистить поплавок:
{ xtype: 'компонент', стиля: 'ясно: как' }

Это теперь показывает, как требуется!

Answer 2

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