Extjs how to set 100% height for vbox dashboard

Question

Hello ~

I want to set the 100% remaining height to panel 2. but I don't know how to do this.

here is my test code,

{ title : 'EAST', region : 'east', layout : 'vbox', layoutConfig : { align : 'stretch' }, bodyStyle : 'border:1px solid blue', width: 300, items : [ new Ext.Panel({ title : 'Panel 1', border : true, layout : 'fit', height : 250, html : 'PANEL 1 AREA' }), new Ext.Panel({ title : 'Panel 2', border : true, bodyStyle : 'border:1px solid red', layout : 'fit', html : 'PANEL 2 AREA' }) ] } 

I tried autoHeight: true and height: "100%" on panel 2, but it does not work.

anyone know please help me ~

thanks ~!

Answer 1

You must use the flex property for the second panel.

 new Ext.Panel({ title : 'Panel 2', border : true, bodyStyle : 'border:1px solid red', layout : 'fit', html : 'PANEL 2 AREA', flex: 1 }) 

Answer 2

try setting the flex property in the second panel

  new Ext.Panel({ title : 'Panel 2', border : true, bodyStyle : 'border:1px solid red', layout : 'fit', html : 'PANEL 2 AREA', flex : 1 }) 

flex is only used when the component is displayed in a container that is configured to use BoxLayout. Each child component with the flex property will bend either vertically (according to VBoxLayout) or horizontally (according to HBoxLayout) in accordance with the relative value of the element’s flexibility compared to the sum of all components with the specified flexibility value.