[Fixed] ColumnLayout : Blank space

[frankthetank]

Hi,

I have a form on 2 columns. I want to have a blank field at the right.
I tried to make a textField hidden, but it seems that the other field under gets to that blank field, so the left field is not aligned with the right one.

|---------|---------|
| Field 1 | Field2 |
|---------|---------|
| Field 3 | Blank |
|---------|---------|
| Field 4 | Field 5 |
|---------|---------|

The Field 5 goes to the Blank one.

Here is my JS code :

var form_etape1 = new Ext.form.FormPanel({
                id:'form_etape1',
                autoHeight:true,
                autoWidth:true,
                frame:true,
                title:'Étape 1',
                buttons:[
                    {
                        id:'btn_calculer',
                        text:'Calculer',
                        type:'submit'
                    },
                    {
                        id:'btn_continuer1',
                        text:'Continuer',
                        type:'submit'
                    }
                ],
                items: [{
                    layout: 'column',
                    bodyStyle: 'padding:5px 5px 0',
                    xtype: 'container',
                    autoEl: 'div',
                    items: [{
                        columnWidth: .5,
                        layout: 'form',
                        bodyStyle: 'padding:5px 5px 0',
                        xtype: 'container',
                        autoEl: 'div',
                        items: [
                            new Ext.form.TextField({
                                id:'hotel_nom',
                                fieldLabel:'Hotel'
                            }),
                            new Ext.form.DateField({
                                id:'hotel_depart',
                                fieldLabel:'Départ',
                                value:new Date(),
                                minValue:new Date()
                            }),
                            new Ext.form.NumberField({
                                id:'hotel_nbjours',
                                fieldLabel:'Nombre de jours'
                            }),
                            new Ext.form.DateField({
                                id:'hotel_retour',
                                fieldLabel:'Retour'
                            })
                        ]
                    }, {
                        columnWidth: .5,
                        layout: 'form',
                        bodyStyle: 'padding:5px 5px 0',
                        xtype: 'container',
                        autoEl: 'div',
                        items: [
                            new Ext.form.TextField({
                                id:'hotel_concierge',
                                fieldLabel:'Concierge'
                            }),
                            new Ext.form.TimeField({
                                id:'hotel_depart_temps',
                                fieldLabel:'Heure de départ'
                            }),
//THIS IS THE BLANK FIELD I WANT, SEEMS TO BREAK RIGHT SIDE WITH THIS CODE
                            new Ext.form.TextField({
                                id:'test',
                                hideLabel:true,
                                hidden:true
                            }),
                            new Ext.form.TimeField({
                                id:'hotel_retour_temps',
                                fieldLabel:'Heure de retour'
                            })
                        ]
                    }]
                }]        
            
        });

Also, I add this code dynamically with Ajax. I add this form inside a TabPanel (onglet_Reservation) with this code :

Ext.getCmp('onglet_reservation').add(form_etape1);//Add the form
Ext.getCmp('onglet_reservation').doLayout();//Refresh

But the Right side of the column is not showing. With Firebug, I have to expand the debug and then it's shows the right side...

Thanks for the help.

[mjlecomte]

Why not a screenshot?

[frankthetank]

Sure thing.

ss1.jpg : When loaded, cannot see right side of the column
ss2.jpg : After playing with the FireBug open/close panel, I get the show the right side ! The Heure de retour should be aligned with Retour. Nombre de jours should have a blank space at the right.

Thanks.

[Specks]

Try this

var form_etape1 = new Ext.form.FormPanel({
                id:'form_etape1',
                autoHeight:true,
                autoWidth:true,
                frame:true,
                title:'Étape 1',
                buttons:[
                    {
                        id:'btn_calculer',
                        text:'Calculer',
                        type:'submit'
                    },
                    {
                        id:'btn_continuer1',
                        text:'Continuer',
                        type:'submit'
                    }
                ],
                items: [{
                    layout: 'column',
                    bodyStyle: 'padding:5px 5px 0',
                    xtype: 'container',
                    autoEl: 'div',
                    items: [{
                        columnWidth: .5,
                        layout: 'form',
                        bodyStyle: 'padding:5px 5px 0',
                        xtype: 'container',
                        autoEl: 'div',
                        items: [
                            new Ext.form.TextField({
                                id:'hotel_nom',
                                fieldLabel:'Hotel'
                            }),
                            new Ext.form.DateField({
                                id:'hotel_depart',
                                fieldLabel:'Départ',
                                value:new Date(),
                                minValue:new Date()
                            }),
                            new Ext.form.NumberField({
                                id:'hotel_nbjours',
                                fieldLabel:'Nombre de jours'
                            }),
                            new Ext.form.DateField({
                                id:'hotel_retour',
                                fieldLabel:'Retour'
                            })
                        ]
                    }, {
                        columnWidth: .5,
                        layout: 'form',
                        bodyStyle: 'padding:5px 5px 0',
                        xtype: 'container',
                        autoEl: 'div',
                        items: [
                            new Ext.form.TextField({
                                id:'hotel_concierge',
                                fieldLabel:'Concierge'
                            }),
                            new Ext.form.TimeField({
                                id:'hotel_depart_temps',
                                fieldLabel:'Heure de départ'
                            }),
                            // Probably a kludge but could work
                            {
                                xtype : 'label',
                                text  : '',
                                labelSeparator: ''
                            },
                            new Ext.form.TimeField({
                                id:'hotel_retour_temps',
                                fieldLabel:'Heure de retour'
                            })
                        ]
                    }]
                }]        
            
        }); 

[frankthetank]

Thanks for the answer.
Is does not seems to work. See ss3.jpg

[frankthetank]

Should I use another way to do this ?

[frankthetank]

Seems like I fixed it (not showing right side)
Removed all the xtype: 'container', autoEl:'div' and bodystyle. Now #1 !! Yay.

[miisha]

Other possibility for making blank space in column is to use:

{
      xtype: 'label',
      html: ' '
}

[cscagliola]

Tried to achieve the same but the code right above didnt work out for me as I dont use 2.0.
The way to go for Ext JS 3.0 is:

fieldLabel: '', xtype: 'displayfield',value: ' '