Question

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

过滤器字段正在被切断

Answer 1

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

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

尝试将flex放到您的组件上。

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

使用视口，其中有一个面板和一个vbox布局，设置flex值，我总是调整预期。

有时您需要在大规模更改的情况下刷新组件布局

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

1 个答案: