ExtJS, problème lors de l'application d'une mise en page

Question

Quand je travaille avec une mise en page de colonne, je ne vois pas mes labelFields Mes champs sont Col., mais il n'y a pas d'étiquette

var familyNameTextField = new Ext.form.TextField({ 
     fieldLabel : 'Ville', 
     allowBlank:false, 
     id : 'familyName' 
    }); 
    var myData = [['EDF','EDF'],['GDF','GDF']]; 

    //The text field for the First Name 
    var firstNameTextField = new Ext.form.ComboBox({ 
     fieldLabel: 'State', 
     hiddenName:'state', 
     store: new Ext.data.ArrayStore({ 
      fields: ['abbr', 'state'], 
      data : myData // from states.js 
     }), 
     valueField:'abbr', 
     displayField:'state', 
     typeAhead: true, 
     mode: 'local', 
     triggerAction: 'all', 
     emptyText:'Select a state...', 
     selectOnFocus:true, 
     width:190 
    }); 
    //The text field for the First Name 
    var demarcheField = new Ext.form.TextField({ 
     fieldLabel : 'Démarche', 
     allowBlank:false, 
     id : 'demarche' 
    }); 
    //Button to show the MessageBox 
    var showMessageBoxBouton = new Ext.Button({ 
     text:'Say Hello', 
     handler:showMessageBox //The function that will be called when the button is clicked 
    }); 
    //The form that will contain all our components 
    var myForm = new Ext.FormPanel({ 
     labelWidth: 115, 
     frame:true, 
     title: 'Personal informations', 
     bodyStyle:'padding:5px 5px 0', 
     width: 900, 
     autoScroll:true, 
     layout:'column', 
     items: [{ 
       items:[ 
        familyNameTextField 
       ] 
      }, 
      { 
       items:[firstNameTextField] 
      }, 
      { 
       items:[demarcheField] 
      }, 
      { 
       items:[showMessageBoxBouton] 
      }   
     ] 
    }); 

Answer 1

Ils comme je suis habitué à mettre en œuvre des champs dans une mise en page de la colonne, il est quelque chose comme ça. ..

var form = new Ext.FormPanel({ 
    labelAlign: 'top', 
    items: [{ 
     layout:'column', 
     defaults: { 
     columnWidth: 0.5 
     }, 
     items:[{ 

      layout: 'form', 
      items: [{ 
       xtype:'textfield', 
       fieldLabel: 'Top Left', 
       name: 'first', 
       anchor:'95%' 
      }, { 
       xtype:'textfield', 
       fieldLabel: 'Bottom Left', 
       name: 'third', 
       anchor:'95%' 
      }] 
     },{ 
      layout: 'form', 
      items: [{ 
       xtype:'textfield', 
       fieldLabel: 'Top Right', 
       name: 'last', 
       anchor:'95%' 
      },{ 
       xtype:'textfield', 
       fieldLabel: 'Bottom Right', 
       name: 'email', 
       anchor:'95%' 
      }] 
     }] 
    }] 
}); 

Essayez et dites-moi si ça marche pour vous ...

Answer 2

Vous ne voyez pas la étiquettes depuis que vous avez remplacé la disposition par défaut de FormPanel - FormLayout - avec ColumnLayout.

Des docs: panneau FormPanel

Par défaut, est configuré panneau FormPanel avec la mise en page: 'forme' d'utiliser un gestionnaire de mise en page Ext.layout.FormLayout , qui styles et rend les champs et correctement les étiquettes . Lorsque vous imbriquez des conteneurs supplémentaires dans un formulaire , vous devez vous assurer que tous les conteneurs descendants qui hébergent l'entrée champs utilisent le gestionnaire de disposition Ext.layout.FormLayout .

Ainsi, des conteneurs nid avec la mise en page: « form » dans la mise en page de colonne et vous obtiendrez de voir les étiquettes