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）来做到这一点？