1. #1
    Sencha User
    Join Date
    Sep 2008
    Posts
    83
    Vote Rating
    0
    frankthetank is on a distinguished road

      0  

    Question [Fixed] ColumnLayout : Blank space

    [Fixed] ColumnLayout : Blank space


    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 :

    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 :

    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.

  2. #2

  3. #3
    Sencha User
    Join Date
    Sep 2008
    Posts
    83
    Vote Rating
    0
    frankthetank is on a distinguished road

      0  

    Default


    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.
    Attached Images

  4. #4
    Sencha User
    Join Date
    May 2007
    Posts
    66
    Vote Rating
    0
    Specks is on a distinguished road

      0  

    Default


    Try this

    PHP 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'
                                
    }),
                                
    // Probably a kludge but could work
                                
    {
                                    
    xtype 'label',
                                    
    text  '',
                                    
    labelSeparator''
                                
    },
                                new 
    Ext.form.TimeField({
                                    
    id:'hotel_retour_temps',
                                    
    fieldLabel:'Heure de retour'
                                
    })
                            ]
                        }]
                    }]        
                
            }); 

  5. #5
    Sencha User
    Join Date
    Sep 2008
    Posts
    83
    Vote Rating
    0
    frankthetank is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha User
    Join Date
    Sep 2008
    Posts
    83
    Vote Rating
    0
    frankthetank is on a distinguished road

      0  

    Default


    Should I use another way to do this ?

  7. #7
    Sencha User
    Join Date
    Sep 2008
    Posts
    83
    Vote Rating
    0
    frankthetank is on a distinguished road

      0  

    Default


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

  8. #8
    Sencha User
    Join Date
    May 2009
    Posts
    4
    Vote Rating
    1
    miisha is on a distinguished road

      0  

    Default


    Other possibility for making blank space in column is to use:
    Code:
    {
          xtype: 'label',
          html: ' '
    }

  9. #9
    Ext User
    Join Date
    Oct 2009
    Posts
    14
    Vote Rating
    0
    cscagliola is on a distinguished road

      0  

    Default


    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: ' '

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi