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
    917
    Vote Rating
    47
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      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
    917
    Vote Rating
    47
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      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