0

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

4

0 回答 0