Question

我的应用程序中的模态窗口有问题。一切都很好，除了调整模态窗口掩码的大小：当浏览器大小减小时，它们会增加。模态窗口掩码保持较小的窗口大小。

这是我的视口

Ext.define('Bis.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'border',
    items: [{
            region: 'north',
            xtype: 'container',
            height: 100,
            layout: 'border',
            items:[{
                xtype: 'container',
                layout: 'border',
                region: 'north',
                height: 70,
                items: [{
                    xtype: 'container',
                    region: 'west',
                    styleHtmlCls: 'account-header-logo',
                    styleHtmlContent: true
                }, {
                    xtype: 'component',
                    region: 'center'
                }, {
                    xtype: 'container',
                    itemId: 'userControlsContainer',
                    region: 'east'
                }]
            }, {
                region: 'center'
            }]

        }, {
            region: 'center',
            bodyStyle: 'background:#79b5d8;'
        }, {
            region: 'south',
            xtype: 'container',
            items:[{
                xtype: 'component',
                width: 150,
                styleHtmlCls: 'footer-logo',
                styleHtmlContent: true
            }]
         }
    ]
});

模态窗口不是添加到视口，而是添加到区域：'center'。添加到视口时，没有这样的问题，但我需要向该区域添加窗口

Answer 1

我已经解决了这个问题。它发生了，因为后台正在监视视口的全局窗口调整大小事件。因此，有时背景蒙版不会调整到合适的大小。我使用了类似于此的修复程序（将其添加到覆盖）：

Ext.EventManager.removeResizeListener(Ext.WindowManager._onContainerResize, Ext.WindowManager);
Ext.EventManager.onWindowResize(Ext.WindowManager._onContainerResize, Ext.WindowManager, {delay: 5});

Answer 2

尝试明确指定中心区域的xtype和布局：

 {
    region: 'center',
    xtype: 'panel',
    layout: 'fit'    
 }

如果这不起作用，您可能需要详细说明如何添加模态窗口。

模态窗口背景没有正确调整大小

2 个答案: