ExtJS vbox layout autoheight

Question

I have two extjs items which are of variable height to be layed out vertically.

I am using Ext.container.Container for the vertical layout, using the following code.

Ext.create('Ext.container.Container', {     
    //height:50,
    renderTo: this.renderTo,
    layout: {
        type: 'vbox'
    },      
    items: [item1,item2],
     //autoHeight:true
});

The problem is the items are not visible on the page unless the height of the container is specified. But, the height of the embedded widgets is not static.

Is there any way to fix this issue? Any other components I can make use of which can stretch automatically to the height of the items.

Answer 1

Instead of height, apply a flex of 1 to your child elements. If you wish the ratio to be different you can play with the flex number. For instance, if you apply flex: 2 and flex: 1 you will get 2 thirds fill on the first element, and 1 third fill on the second.

For reference: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.VBox-cfg-flex