Question

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

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

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

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

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

对于此类问题的一般方法的任何建议将不胜感激

Answer 1

是的，您可以使用vbox布局处理它，尝试调整此窗口宽度：

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

您需要为项目设置minWidth。

因此，您可以在边框布局上将vbox布局设置为居中容器，并使用此示例。

Answer 2

您应该使用minHeight（如果vbox和set align：'stretch'）和“flex”配置。

如果你把flex = 1，组件将伸展以填充容器，但仍然会尊重minHeight。

如果继续添加组件，它们将适合容器，直到达到每个组件的最小minHeight，然后一个狂野的scroolbar将会出现！

如何在所有组件都是最小尺寸之前填充视口，然后添加滚动条？

2 个答案: