2010-11-22 42 views
1

J'ai un formulaire avec des champs ajoutés dynamiquement (tailles variables). Je voudrais mettre un certain nombre de champs de formulaire dans un fieldset, et avoir la bordure de fieldset juste assez grande pour contenir tous les champs.Comment puis-je obtenir cette bordure fieldset pour envelopper étroitement son contenu

Voici un (laid) exemple qui montre la 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(); 

Voici à quoi il ressemble: alt text

Je ne connaîtra pas la largeur des champs contenus au préalable, donc je Impossible de spécifier une largeur.

Merci pour vos suggestions.

Répondre

0

Ok, fonctionne en changeant certaines propriétés fieldset:
mise en page à 'table',
true Largeur automatique,
ajoutant cls avec 'float: left', (mettre ce style ne semble pas aider)
et l'ajout d'un élément factice pour effacer le flotteur:
{ xtype: 'composant', style: 'clear: both' }

Il montre maintenant comme vous le souhaitez!

0

Non ce que vous avez demandé, mais en ajoutant flex: 1 aux valeurs par défaut pour le fieldset rend les champs se répartissent uniformément dans les limites du fieldset.

+0

Merci. Je ne veux pas qu'ils soient arrangés uniformément, je veux une frontière de fieldset plus petite. – Gerrat