如何填充视口直到所有组件都达到最小尺寸，然后添加滚动条？

Question

所以我有一个带边框布局的视口，我在中心部分工作。我想添加一组 Highcharts 图表，它们具有最小 width/height 和最大高度。

我为每个图表创建了一个包装器组件。

我希望图表组件尽可能大，直到中心区域已满，此时它们开始缩小到最小尺寸，此时会出现滚动条。

这里的一般方法是什么？我出现了滚动条，但没有调整大小。

图表容器上带有 flex 和最小高度的 vbox 可以完成这项工作吗？

如能就此类问题的一般方法提出任何建议，我们将不胜感激

Answer 1

是的，你可以用 vbox 布局来处理它，尝试调整这个 window 宽度：

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

您需要为项目设置最小宽度。

所以你可以在你的边框布局上设置居中容器到 vbox 布局并使用这个例子。

Answer 2

您应该使用 minHeight（如果 vbox ans 设置对齐：'stretch'）和 "flex" 配置。

如果设置 flex=1，组件将拉伸以填充容器，但仍会遵守 minHeight 。

如果继续添加组件，它们将适合容器，直到达到每个组件的最小 minHeight，然后会出现一个乱七八糟的滚动条！

如何填充视口直到所有组件都达到最小尺寸，然后添加滚动条？

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

extjs

extjs6

extjs6-classic