Multiple column in FormPanel ExtJs 3.2

Question

I am trying to create a form in ExtJs that has rows of two columns and others of three, i have this:

but i want that the fields: "Fecha Escritura", "Acción" y "Fecha Escritura" to be in the same row.

this is my code:

 formBuscador = new Ext.FormPanel({
    labelWidth : 120,
    frame : true,
    title : buscador,
    bodyStyle : 'padding:5px 5px 0',
    width : 1200,
    renderTo : 'gridFormularioBusqueda',
    items : [ {
        //xtype: 'form',
        layout : 'column',
        labelAlign: 'left',
        defaults: {
              xtype: 'container',
              layout: 'form',
              columnWidth: 0.5,
              labelWidth: 185
           },
           items: [   
                    {items: [{
                                xtype : 'textfield',
                                fieldLabel : idEmpleado,
                                allowBlank : true,
                                name : 'idEmpleadoP',
                                id : 'idEmpleadoPB',
                                autoCreate: {tag: 'input', type: 'text', autocomplete: 'off',maxlength: '9'}
                            }]
                    },{items: [{
                                xtype : 'textfield',
                                fieldLabel : nif,
                                allowBlank : true,
                                name : 'nifP',
                                id : 'nifPB',
                                autoCreate: {tag: 'input', type: 'text', autocomplete: 'off',maxlength: '9'}
                              }]
                    },{items: [{
                                xtype : 'textfield',
                                fieldLabel : nombre,
                                allowBlank : false,
                                blankText : campoNoVacioNombre,
                                name : 'nombreP',
                                id : 'nombrePB',
                                autoCreate: {tag: 'input', type: 'text', autocomplete: 'off',maxlength: '100'}
                              }]
                    },{items: [{
                                xtype : 'textfield',
                                fieldLabel : apellidos,
                                allowBlank : false,
                                blankText : campoNoVacioApellido,
                                name : 'apellidosP',
                                id : 'apellidosPB',
                                autoCreate: {tag: 'input', type: 'text', autocomplete: 'off',maxlength: '100'}
                              }]
                    },{items: [{
                                xtype : 'textfield',
                                fieldLabel : notario,
                                allowBlank : false,
                                blankText : campoNoVacioNotario,
                                name : 'notarioP',
                                id : 'notarioPB',
                                autoCreate: {tag: 'input', type: 'text', autocomplete: 'off',maxlength: '75'}
                              }]
                    },{items: [{
                                xtype : 'numberfield',
                                fieldLabel : numeroProtocolo,
                                allowBlank : false,
                                blankText : campoNoVacioNumeroProtocolo,
                                name : 'numeroProtocoloP',
                                id : 'numeroProtocoloPB',
                                autoCreate: {tag: 'input', type: 'text', autocomplete: 'off',maxlength: '5'}
                              }]
                    },{items: [{
                                fieldLabel : incluidaDelegacion,
                                html: "<select id='incluidaDelegacionPB' name='incluidaDelegacionP' style='border-color:#b5b8c8;background-color:white;width:20%;height:95%;margin-bottom:9px;margin-top: 1px;' >" +
                                        "<option id='incluidaDelegacionPBNo' value='false'>No</option>" +
                                        "<option id='incluidaDelegacionPBSi' value='true'>Si</option>" +
                                        "</select> "
                              }]
                    },{items: [{
                                fieldLabel : revocacionDelegacion,
                                html: "<select id='revocacionDelegacionBP' name='revocacionDelegacionB' style='border-color:#b5b8c8;background-color:white;width:20%;height:95%;margin-bottom:9px;margin-top: 6px;' >" +
                                        "<option id='revocacionDelegacionPBNo' value='false'>No</option>" +
                                        "<option id='revocacionDelegacionPBSi' value='true'>Si</option>" +
                                        "</select> "
                              }]
                    },{items: [{
                                fieldLabel : revocado,
                                html: "<select id='revocadoPB' name='revocadoP' style='border-color:#b5b8c8;background-color:white;width:20%;height:95%;margin-bottom:10px;margin-top: 1px;' >" +
                                        "<option id='revocadoPBNo' value='false'>No</option>" +
                                        "<option id='revocadoPBSi' value='true'>Si</option>" +
                                        "</select> "
                              }]
                    },{items: [{
                                fieldLabel : limiteCuantitativo,
                                html: "<select id='limiteCuantitativoBP' name='limiteCuantitativoP' style='border-color:#b5b8c8;background-color:white;width:20%;height:95%;margin-bottom:10px;margin-top: 1px;' >" +
                                        "<option id='limiteCuantitativoPBNo' value='false'>No</option>" +
                                        "<option id='limiteCuantitativoPBSi' value='true'>Si</option>" +
                                        "</select> "
                              }]
                    },{items: [{
                                xtype : 'datefield',
                                fieldLabel : fechaEscritura,
                                allowBlank : false,
                                blankText : campoNoVacioFechaEscritura,
                                labelWidth: 100,
                                name : 'fechaEscrituraP',
                                id : 'fechaEscrituraPB',
                                editable : false,
                                autoCreate: {tag: 'input', type: 'text', autocomplete: 'off',maxlength: '10'}
                              }]
                    },{items: [{
                                fieldLabel : 'Acción',
                                html: "<select id='accionFechaEscrituraBP' name='accionFechaEscrituraBP' style='border-color:#b5b8c8;background-color:white;width:20%;height:95%;margin-bottom:10px;margin-top: 1px;' >" +
                                        "<option id='accionFechaEscrituraBPAnterior' value='Anterior'>Anterior</option>" +
                                        "<option id='accionFechaEscrituraBPPosterior' value='Posterior'>Posterior</option>" +
                                        "<option id='accionFechaEscrituraBPEntre' value='Entre'>Entre</option>" +
                                        "<option id='accionFechaEscrituraBPIgualA' value='IgualA'>Igual A</option>" +
                                        "</select> "
                              }]
                    },{items: [{
                                xtype : 'datefield',
                                fieldLabel : fechaEscritura,
                                allowBlank : false,
                                blankText : campoNoVacioFechaEscritura,
                                name : 'fechaEscrituraPFin',
                                id : 'fechaEscrituraPBFin',
                                editable : false,
                                autoCreate: {tag: 'input', type: 'text', autocomplete: 'off',maxlength: '10'}
                              }]
                    }]
            }]

    });

The last three are the ones that do not work, i have been trying with a new columnWith, and with but that don't work, any idea?

Answer 1

As per your requirement for column layout. I have worked around to create multiple column in form.

In this FIDDLE, you can check it is working fine. Hope this will guide you or help you to achieve you requirement.

Ext.onReady(function() {
    var form = new Ext.FormPanel({
        renderTo: Ext.getBody(),
        frame: true,
        title: 'Multi Column, Nested Layouts and Anchoring',
        bodyStyle: 'padding:10px;',
        items: [{
            layout: 'column',
            defaults: {
                columnWidth: .5,
                layout: 'form'
            },
            items: [{
                defaults: {
                    xtype: 'textfield',
                    anchor: '95%',
                },
                items: [{
                    fieldLabel: 'A'
                }, {
                    fieldLabel: 'B'
                }, {
                    fieldLabel: 'C'
                }, {
                    xtype: 'combo',
                    fieldLabel: 'Combo 1',
                    store: new Ext.data.ArrayStore({
                        fields: ['text', 'value'],
                        data: [{
                            abbr: 'yes',
                            state: 'NO'
                        }]
                    }),
                    displayField: 'text',
                    valueField: 'text',
                    typeAhead: true,
                    queryMode: 'local'
                }, {
                    xtype: 'combo',
                    fieldLabel: 'Combo 2',
                    store: new Ext.data.ArrayStore({
                        fields: ['text', 'value'],
                        data: [{
                            abbr: 'yes',
                            state: 'NO'
                        }]
                    }),
                    displayField: 'text',
                    valueField: 'text',
                    typeAhead: true,
                    queryMode: 'local'
                }, {
                    xtype: 'datefield',
                    fieldLabel: 'date 1'
                }, {
                    xtype: 'datefield',
                    fieldLabel: 'date 2'
                }]
            }, {
                defaults: {
                    xtype: 'textfield',
                    anchor: '95%'
                },
                items: [{
                    fieldLabel: 'D'
                }, {
                    fieldLabel: 'E'
                }, {
                    fieldLabel: 'F'
                }, {
                    xtype: 'combo',
                    fieldLabel: 'Combo 3',
                    store: new Ext.data.ArrayStore({
                        fields: ['text', 'value'],
                        data: [{
                            abbr: 'yes',
                            state: 'NO'
                        }]
                    }),
                    displayField: 'text',
                    valueField: 'text',
                    typeAhead: true,
                    queryMode: 'local'
                }, {
                    xtype: 'combo',
                    fieldLabel: 'Combo 4',
                    store: new Ext.data.ArrayStore({
                        fields: ['text', 'value'],
                        data: [{
                            abbr: 'yes',
                            state: 'NO'
                        }]
                    }),
                    displayField: 'text',
                    valueField: 'text',
                    typeAhead: true,
                    queryMode: 'local'
                }, {
                    xtype: 'combo',
                    fieldLabel: 'Combo 5',
                    store: new Ext.data.ArrayStore({
                        fields: ['text', 'value'],
                        data: [{
                            abbr: 'yes',
                            state: 'NO'
                        }]
                    }),
                    displayField: 'text',
                    valueField: 'text',
                    typeAhead: true,
                    queryMode: 'local'
                }]
            }]
        }],

        buttons: [{
            text: 'Save'
        }, {
            text: 'Cancel'
        }]
    });
});