1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    27
    Vote Rating
    0
    Hanterdro is on a distinguished road

      0  

    Default Nested Vbox and HBox in a Panel

    Nested Vbox and HBox in a Panel


    Hi,

    I'm doing some experiments with extjs4.

    I dont unterstand why this panel have no height.

    I dont want to set the height by hand, because the panel should have the height of the content.

    If I set in the panel a height by hand everything works fine.

    PHP Code:
    Ext.define('TESTAPP.view.Viewport', {

        
    extend'Ext.container.Viewport',

        
    alias 'widget.myViewport',

        
    layout'border',
        
    autoHeighttrue,

        
    items: [{

            
    region'center',
            
    borderfalse,
            
    html'center',

            },{

            
    region'west',
            
    width:250,
            
    borderfalse,
            
            
    bodyPadding20,

            
    items: [{
            
                
    xtype'panel',
                
    margin:"0 0 20px 0",
                
    title'test title',
                
    layout: {
                    
    type'vbox',
                    
    align'stretch'
                
    },

                
    items:  [{
                
                        
    layout: {
                            
    type'hbox',
                            
    align'strech'
                        
    },
                        
    items: [{
                        
                            
    html'text left'
                        
                        
    },{
                        
                            
    html'text right'
                        
    }]        

            
                    },{
                
                        
    html"hello world"
                    
    }]
        
            }]
            
        }]




    }); 

  2. #2
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    941
    Vote Rating
    65
    westy is just really nice westy is just really nice westy is just really nice westy is just really nice

      0  

    Default


    You're missing a layout: 'fit'

    Code:
                Ext.define('TESTAPP.view.Viewport', {
                    extend: 'Ext.container.Viewport',
                    alias : 'widget.myViewport',
                    layout: 'border',
                    autoHeight: true,
                    items: [{
                         region: 'center',
                        border: false,
                        html: 'center',
                    },{
                        region: 'west',
                        width:250,
                        border: false,
                        bodyPadding: 20,
                        layout: 'fit',
                        items: [{
                            xtype: 'panel',
                            margin:"0 0 20px 0",
                            title: 'test title',
                            layout: {
                                type: 'vbox',
                                align: 'stretch'
                            },
                             items:  [{
                                     layout: {
                                        type: 'hbox',
                                        align: 'strech'
                                    },
                                    items: [{
                                         html: 'text left'
                                     },{
                                         html: 'text right'
                                    }]
                                 },{
                                     html: "hello world"
                                }]
                         }]
                     }]
                });
    Product Architect
    Altus Ltd.

  3. #3
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    27
    Vote Rating
    0
    Hanterdro is on a distinguished road

      0  

    Default


    Hi westy,

    thank you for you quick response.

    I experimented with layout:fit, but I didn't get the result what i want.

    Layout: fit is limited to 1 child element, but I need more than one child panels.

    In addition forces layout:fit my panel to a 100% height, but the height should be only so big as the childs of the panel.

    PHP Code:
                Ext.define('MYTESTAPP.view.Viewport', {
                    
    extend'Ext.container.Viewport',
                    
    alias 'widget.myViewport',
                    
    layout'border',
                    
    autoHeighttrue,
                    
    items: [{
                         
    region'center',
                        
    borderfalse,
                        
    html'center',
                    },{
                        
    region'west',
                        
    width:250,
                        
    borderfalse,
                        
    bodyPadding20,
                        
    items: [{
                            
    xtype'panel',
                            
    margin:"0 0 20px 0",
                            
    title'test title',
                            
    layout: {
                                
    type'vbox',
                                
    align'stretch'
                            
    },
                             
    items:  [{
                                     
    layout: {
                                        
    type'hbox',
                                        
    align'strech'
                                    
    },
                                    
    items: [{
                                         
    html'text left'
                                     
    },{
                                         
    html'text right'
                                    
    }]
                                 },{
                                     
    html"hello world"
                                
    }]
                         },{
                            
    xtype'panel',
                            
    margin:"0 0 20px 0",
                            
    title'test title',
                            
    layout: {
                                
    type'vbox',
                                
    align'stretch'
                            
    },
                             
    items:  [{
                                     
    layout: {
                                        
    type'hbox',
                                        
    align'strech'
                                    
    },
                                    
    items: [{
                                         
    html'text left'
                                     
    },{
                                         
    html'text right'
                                    
    }]
                                 },{
                                     
    html"hello world"
                                
    }]
                         }]
                     }]
                }); 

  4. #4
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    941
    Vote Rating
    65
    westy is just really nice westy is just really nice westy is just really nice westy is just really nice

      0  

    Default


    Oh right, I see what you're saying.

    As far as I understand it you either use fit layout, or something needs a height for the autoHeight to work from.
    Have you tried putting more realistic content into the panels?
    Product Architect
    Altus Ltd.

  5. #5
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    27
    Vote Rating
    0
    Hanterdro is on a distinguished road

      0  

    Default


    hey westy,

    yeah... i tried to fill the panels with some test buttons. I just simplified the example for the forum here and added some texts, instead of complexe layout .

    I should mention that the stuff is working with hbox instad of vbox very well.

    I find out that with vbox are some inline heights in the DOM are not set.
    The content is in the DOM, but because of the missing height and the overflow:hidden my content is just not shown.

    I think this is bug with vbox (because hbox is working...).

Thread Participants: 1