Ext JS VBox在顶部容器之前收缩底部容器

Question

我有一个带有VBox布局的Ext JS面板（对齐拉伸）。 其中有两个容器。

当窗口调整大小时，我希望容器像这样调整大小：

注意：顶部区域的最小高度必须为200px 。 每个元素上的内容应自动溢出。

编辑：为澄清起见，每个图像在各种窗口大小下显示面板的所需布局。 这是每个图像的说明（从左到右）：

1. 所有内容都适合窗口时的布局。 顶部的高度（在此状态下）由其子元素的高度确定。

2. 当窗口垂直调整到底部高度为100px （最大高度）的位置时的布局。 到目前为止，底部将调整大小并溢出，但顶部的高度将保持不变。

3. 调整窗口大小后的布局。 现在， 而不是底部调整大小，顶部应该调整大小并溢出。

这是我的代码（为便于阅读而简化）：

Ext.define('MyApp.view.MyView', {
    extend: 'Ext.panel.Panel',

    layout: {
        type: 'vbox',
        align: 'stretch',
    },
    autoScroll: true,

    items: [
        {
            xtype: 'container',
            autoScroll: true,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },

            minHeight: 200

            items: [
                // There are a few variable height elements here
            ]
        },
        {
            xtype: 'bottomSection',
            minHeight: 100,
            autoScroll: true
            flex: 1
        }
    ]
});

这在某种程度上可行，但是在将底部调整到最小高度（ 100px ）之后，顶部不会开始收缩。

有没有办法使用纯Ext JS实现此功能？ 如果没有，是否有一种简单的方法可以通过处理事件（即onResize ）来做到这一点？