Ext.js：浏览器调整大小的调整面板答案

【问题标题】：Ext.js: Resizing Panel on Browser ResizeExt.js：浏览器调整大小的调整面板
【发布时间】：2016-03-11 20:26:56
【问题描述】：

我有一个使用 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
                            }
                        ]
                    },
                ]
            },

过滤器字段是被截断的内容

【问题讨论】：

潜在的欺骗？ stackoverflow.com/questions/5885868/…
@SenseiJames resizable 属性让用户单击并拖动以调整大小。这不是我要找的。我正在寻找能够自行拉长的盒子。
这里没有足够的信息，你有所有的自定义 xtypes 来掩盖它们内部发生的事情。此外，显示整个布局层次结构也很重要。我建议整理一个最小的测试用例来减少麻烦（例如，隐藏的面板似乎不相关）。
还有，什么Ext版本？
@EvanTrimboli 4.1.1。面板在加载站点时隐藏，但随后设置为不隐藏。所以有问题的面板是baseMapOutlineField 和dualMapOutlineField。我可以尝试添加更多代码，只是不完全确定要添加什么。我对 ext.js 很陌生

标签： javascript css extjs

【解决方案1】：

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

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

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

这里是关于使用过去帮助我的布局的示例： http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html

使用视口，里面有一个面板和一个 vbox 布局，设置 flex 值，我总是可以调整大小。

有时您需要刷新组件布局以防发生大规模更改

【讨论】：

好的！我试试看！