1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    22
    Answers
    1
    Vote Rating
    2
    marco.napetti is on a distinguished road

      0  

    Default Unanswered: ExtJS VBox layout troubles (also resizable panel problems)

    Unanswered: ExtJS VBox layout troubles (also resizable panel problems)


    I'm having big problems with a vertical layout panel.
    I could partially solve those problems, setting the layout to auto, but the panel still doesn't resize correctly.

    I have a dynamically composed application, so I can't show you the exact application output, but a valid example could be this:
    PHP Code:
    Ext.create('Ext.Panel', {
        
    width500,
        
    height400,
        
    title"Viewport",
        
    layout'fit',
        
    renderTodocument.body,
        
    dockedItems: [{
            
    xtype'toolbar',
            
    dock'bottom'
        
    }],
        
    items: [{
            
    xtype'panel',
            
    layout'border',
            
    items: [{
                
    xtype'panel',
                
    title'Tree',
                
    collapsibletrue,
                
    flex1,
                
    region'west'
            
    }, {
                
    xtype'panel',
                
    layout'border',
                
    flex5,
                
    region'center',
                
    items: [{
                    
    xtype'panel',
                    
    title'Grid',
                    
    region'center',
                    
    flex5
                
    }, {
                    
    xtype'panel',
                    
    region'east',
                    
    resizabletrue,
                    
    layout'vbox',
                    
    flex1,
                    
    dockedItems: [{
                        
    xtype'toolbar',
                        
    dock'top'
                    
    }],
                    
    items: [{
                        
    xtype'panel',
                        
    title'Detail 1',
                        
    collapsibletrue
                    
    }, {
                        
    xtype'panel',
                        
    title'Detail 2',
                        
    collapsibletrue
                    
    }, {
                        
    xtype'panel',
                        
    title'Detail 3',
                        
    collapsibletrue
                    
    }, {
                        
    xtype'panel',
                        
    title'Detail 4',
                        
    collapsibletrue
                    
    }]
                }]
            }]
        }]
    }); 
    As you can see, with the vbox layout nothing is displayed inside the east panel but, if you comment out the layout property, contents are displayed correctly but you still can't resize it right.

    Anyone has ever experienced this problem?

  2. #2
    Sencha User
    Join Date
    Jun 2009
    Location
    Burlington, Ontario
    Posts
    174
    Answers
    3
    Vote Rating
    2
    Bleak is on a distinguished road

      0  

    Default


    Just a quick glance, but try adding the layout with align: 'stretch'; And add a flex on each of the child panels.. i.e flex: 1,

    PHP Code:
    Ext.create('Ext.Panel', {
        
    width500,
        
    height400,
        
    title"Viewport",
        
    layout'fit',
       
    floatingtrue,
       
    renderTodocument.body,
        
    dockedItems: [{
            
    xtype'toolbar',
            
    dock'bottom'
        
    }],
        
    items: [{
            
    xtype'panel',
            
    layout'border',
            
    items: [{
                
    xtype'panel',
                
    title'Tree',
                
    collapsibletrue,
                
    flex1,
                
    region'west'
            
    }, {
                
    xtype'panel',
                
    layout'border',
                
    flex5,
                
    region'center'
               
    items: [{
                    
    xtype'panel',
                    
    title'Grid'
                   
    region'center',
                    
    flex5
                
    }, {
                    
    xtype'panel',
                  
    region'east',
                    
    resizabletrue,
                    
    layout: {
                         
    type'vbox',
                        
    align'stretch' 
                   
    },
                    
    flex1,
                    
    dockedItems: [{ 
                       
    xtype'toolbar'
                       
    dock'top' 
                   
    }], 
                   
    items: [{
                        
    xtype'panel',  
                      
    title'Detail 1',
                        
    collapsibletrue 
                   
    }, {  
                      
    xtype'panel',
                        
    title'Detail 2',
                        
    collapsibletrue 
                   
    }, { 
                       
    xtype'panel',  
                      
    title'Detail 3',
                        
    collapsibletrue 
                  
    }, { 
                       
    xtype'panel'
                       
    title'Detail 4',
                        
    collapsibletrue  
                  
    }] 
               }]    
        }]
        }]}); 

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    22
    Answers
    1
    Vote Rating
    2
    marco.napetti is on a distinguished road

      0  

    Default


    Quote Originally Posted by Bleak View Post
    Just a quick glance, but try adding the layout with align: 'stretch'; And add a flex on each of the child panels.. i.e flex: 1,

    PHP Code:
    Ext.create('Ext.Panel', {
        
    width500,
        
    height400,
        
    title"Viewport",
        
    layout'fit',
       
    floatingtrue,
       
    renderTodocument.body,
        
    dockedItems: [{
            
    xtype'toolbar',
            
    dock'bottom'
        
    }],
        
    items: [{
            
    xtype'panel',
            
    layout'border',
            
    items: [{
                
    xtype'panel',
                
    title'Tree',
                
    collapsibletrue,
                
    flex1,
                
    region'west'
            
    }, {
                
    xtype'panel',
                
    layout'border',
                
    flex5,
                
    region'center'
               
    items: [{
                    
    xtype'panel',
                    
    title'Grid'
                   
    region'center',
                    
    flex5
                
    }, {
                    
    xtype'panel',
                  
    region'east',
                    
    resizabletrue,
                    
    layout: {
                         
    type'vbox',
                        
    align'stretch' 
                   
    },
                    
    flex1,
                    
    dockedItems: [{ 
                       
    xtype'toolbar'
                       
    dock'top' 
                   
    }], 
                   
    items: [{
                        
    xtype'panel',  
                      
    title'Detail 1',
                        
    collapsibletrue 
                   
    }, {  
                      
    xtype'panel',
                        
    title'Detail 2',
                        
    collapsibletrue 
                   
    }, { 
                       
    xtype'panel',  
                      
    title'Detail 3',
                        
    collapsibletrue 
                  
    }, { 
                       
    xtype'panel'
                       
    title'Detail 4',
                        
    collapsibletrue  
                  
    }] 
               }]    
        }]
        }]}); 
    Ok, the align stretch solves the vbox problem, but the panel resize problem is still present...

  4. #4
    Sencha User
    Join Date
    Jul 2011
    Posts
    22
    Answers
    1
    Vote Rating
    2
    marco.napetti is on a distinguished road

      0  

    Default


    I observed the resize problem happens when you use the panel handles, but if you use the border layout handles there isn't problem, so I solved this way:
    PHP Code:
    Ext.create('Ext.Panel', {
        
    width500,
        
    height400,
        
    title"Viewport",
        
    layout'fit',
       
    floatingtrue,
       
    renderTodocument.body,
        
    dockedItems: [{
            
    xtype'toolbar',
            
    dock'bottom'
        
    }],
        
    items: [{
            
    xtype'panel',
            
    layout'border',
            
    items: [{
                
    xtype'panel',
                
    title'Tree',
                
    collapsibletrue,
                
    flex1,
                
    region'west'
            
    }, {
                
    xtype'panel',
                
    layout'border',
                
    flex5,
                
    region'center'
               
    items: [{
                    
    xtype'panel',
                    
    title'Grid'
                   
    region'center',
                    
    flex5
                
    }, {
                    
    xtype'panel',
                  
    region'east',
                    
    resizable: {
                        
    handles''
                    
    },
                    
    splittrue,
                    
    layout: {
                         
    type'vbox',
                        
    align'stretch' 
                   
    },
                    
    flex1,
                    
    dockedItems: [{ 
                       
    xtype'toolbar'
                       
    dock'top' 
                   
    }], 
                   
    items: [{
                        
    xtype'panel',  
                      
    title'Detail 1',
                        
    collapsibletrue 
                   
    }, {  
                      
    xtype'panel',
                        
    title'Detail 2',
                        
    collapsibletrue 
                   
    }, { 
                       
    xtype'panel',  
                      
    title'Detail 3',
                        
    collapsibletrue 
                  
    }, { 
                       
    xtype'panel'
                       
    title'Detail 4',
                        
    collapsibletrue  
                  
    }] 
               }]    
        }]
        }]}); 
    Clearly resizable is only about the panel itself, to make the border layout resizable you must use split.

Thread Participants: 1

Tags for this Thread

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