Nested Vbox and HBox in a Panel

[Hanterdro]

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.

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,

        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"
                }]
    
        }]
        
    }]




}); 

[westy]

You're missing a layout: 'fit'

            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"
                            }]
                     }]
                 }]
            });

[Hanterdro]

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.

            Ext.define('MYTESTAPP.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,
                    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"
                            }]
                     }]
                 }]
            }); 

[westy]

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?

[Hanterdro]

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...).