1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    33
    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
    33
    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
    33
    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