How to fill viewport until all components are minimum size, then add scroll bars?

Question

So I have a viewport with a border layout and I'm working in the center section. I want to add a collection of Highcharts charts, which have a minimum width/height, and also a max height.

I've created a wrapper component for each chart.

I want the chart components to be as large as possible until the center region is full, at which point they start shrinking to minimum size, at which point a scroll bar then appears.

What would the general approach be here? I have got scroll bars appearing but not the resizing.

Would a vbox with flex, and minimum heights on the chart containers, do the job?

Any advice about general approach for this type of issue would be appreciated

Answer 1

Yes, you can handle it with vbox layout, try to resize this window width:

Here you can try a working fiddle

Ext.create({
            xtype:'window',
            width:500,
            height:500,
            layout:{
                type:'vbox',
                align:'stretch'
            },
            scrollable:'both',
            items:[{
                xtype:'container',
                style:'background-color:red;',
                minWidth:300,
                height:200,
                margin:5
            },{
                xtype:'container',
                style:'background-color:red;',
                minWidth:300,
                height:200,
                margin:5
            },{
                xtype:'container',
                style:'background-color:red;',
                minWidth:300,
                height:200,
                margin:5
            },{
                xtype:'container',
                style:'background-color:red;',
                minWidth:300,
                height:200,
                margin:5
            }]
        }).show();

You need to set a minWidth to the items.

So you can set to the centered container on your border layout the vbox layout and use this example.