Как заполнить область просмотра, пока все компоненты не будут иметь минимальный размер, а затем добавить полосы прокрутки?

Question

Итак, у меня есть окно просмотра с макетом границы, и я работаю в центральной части. Я хочу добавить коллекцию диаграмм Highcharts, которые имеют минимальную ширину / высоту, а также максимальную высоту.

Я создал компонент-оболочку для каждого графика.

Я хочу, чтобы компоненты диаграммы были максимально большими, пока центральная область не заполнится, и в этот момент они начинают уменьшаться до минимального размера, после чего появляется полоса прокрутки.

Каким будет общий подход здесь? У меня появляются полосы прокрутки, но нет изменения их размера.

Будет ли работать vbox с flex и минимальной высотой на контейнерах диаграммы?

Буду признателен за любые советы по общему подходу к этому типу вопросов.

Answer 1

Вы должны работать с minHeight (если vbox и set set align: 'stretch') и с "flex" config.

Если вы установите flex = 1, компонент растянется, чтобы заполнить контейнер, но все равно будет учитывать minHeight.

Если продолжать добавлять компоненты, они будут помещаться в контейнер до тех пор, пока не будет достигнут min minHeight каждого из них, а затем появится дикая полоса прокрутки!

Answer 2

Да, вы можете справиться с макетом vbox, попробуйте изменить ширину этого окна:

Здесь вы можете попробовать работающую скрипку

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();

Вам необходимо установить minWidth для элементов.

Таким образом, вы можете установить для центрированного контейнера на макете границы макет vbox и использовать этот пример.