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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar