EXTJS, problem when applying a layout

Question

When I work with a column Layout, I can't see my labelFields My fields are in cols, but there is no label

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

You don't see the labels since you replaced FormPanel's default layout - FormLayout - with the ColumnLayout.

From the FormPanel docs:

By default, FormPanel is configured with layout:'form' to use an Ext.layout.FormLayout layout manager, which styles and renders fields and labels correctly. When nesting additional Containers within a FormPanel, you should ensure that any descendant Containers which host input Fields use the Ext.layout.FormLayout layout manager.

So, nest containers with layout:'form' inside the column layout and you'll get to see labels

Answer 2

They way I'm used to implement fields in a column layout it's something like this...

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%'
          }]
      }]
  }]
});

Try it and tell me if it works for you...