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

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

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

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

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

Справится ли vbox с flex и минимальной высотой контейнеров диаграмм?

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


extjs extjs6-classic extjs6
person trouserboycott    schedule 02.05.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Да, вы можете справиться с этим с макетом 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 и использовать этот пример.

person Mr.Bruno    schedule 02.05.2018

arrow_upward
2
arrow_downward

Вы должны работать с minHeight (если vbox и установить align: 'stretch') и с конфигурацией "flex".

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

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

person Fabio Barros    schedule 02.05.2018