Javascript Ext.js:浏览器上的“调整大小”面板“调整大小”

我有一个使用Ext.js的侧面板。在浏览器调整大小之前，侧面板中的一个面板可以正常工作。浏览器调整大小后，它会切断面板的零部件

如何在调整浏览器大小时调整面板大小

{
        xtype: 'panel',
        border: 1,
        margin: 5,
        flex: 1,
        autoScroll: true,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [
            {
                xtype: 'panel',
                title: localization.moduleS.labelOutlineAttributesField,
                border: 0,
                bodyPadding: '12 5 12 5',
                className: 'outlineAttrField',
                hidden: true,
                items: [
                ]
            },
            {
                xtype: 'sattrfillinpanel',
                title: localization.moduleS.labelFillInAttributesField,
                border: 0,
                bodyPadding: '2 5 12 5',
                hidden: true
            },
            {
                xtype: 'panel',
                title: localization.moduleS.labelGeoAttributesField,
                border: 0,
                bodyPadding: '5',
                className: 'outlineField',
                hidden: true,
                items: [
                    {
                        xtype: 'sdrawbuttonpanel',
                        className: 'drawButtonPanel',
                        margin: '0 0 0 0', 
                    }, 
                    {
                        xtype: 'container',
                        title: localization.moduleS.labelFiltersPanel,
                        border: 0,
                        margin: '0, 5, 0, 2',
                        className: 'filtersField',
                        hidden: true,
                        items: [
                            {
                                xtype: 'sfeaturefilterpanel',
                                className: 'baseMapOutlineField',
                                label: localization.moduleS.labelShowAttributesOnLeftField
                            },
                            {
                                xtype: 'sfeaturefilterpanel',
                                margin: '0 0 0 0',
                                className: 'dualMapOutlineField',
                                label: localization.moduleS.labelShowAttributesOnRightField
                            }
                        ]
                    },
                ]
            },

---

filters字段被切断了

问题不在于面板的大小调整，我认为您的代码是正确的，但我认为问题在于面板内部的组件

就我个人而言，如果我在面板内使用vbox或hbox布局，我会为面板内的组件设置一个flex值，显然，在浏览器的调整大小事件中，如果没有flex，您的组件无法自动调整大小

试着给你的组件增加一个弹性

以下是过去帮助我使用布局的示例：

使用一个视口，里面有一个面板和一个vbox布局，设置flex值，我总是能按预期调整大小

---

有时，如果体量发生变化，您需要刷新零部件布局

是否可能出现重复@感知

resizeable

属性让用户单击并拖动以调整大小。那不是我要找的。我正在寻找一个可以自己拉长的盒子。这里没有足够的信息，你有所有自定义的X类型来掩盖里面发生的事情。此外，显示整个布局层次结构也很重要。我建议把一个最小的测试用例放在一起，以减少麻烦（例如，隐藏的面板似乎不相关）。还有，什么Ext版本？@Evantimboli 4.1.1。面板在加载站点时隐藏，但随后设置为不隐藏。因此，存在问题的面板是

baseMapOutlineField

和

dualMapOutlineField

。我可以尝试添加更多代码，只是不完全确定要添加什么。我对ext.js很陌生好吧！我试试看！