Question

I have a problem with modal window in my application. All is good, except when resizing modal window mask: when browser size decreases, they increase. Modal window mask stays at a smaller window size.

Here is my viewport

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
            }]
         }
    ]
});

Modal window adding not to the viewport, but to the region: ‘center’. When adding to the viewport, there are no such problems, but I need to add window to this region

Answer 1

I have fixed the problem. It happens, because background is listening for global window resize event as viewport do. So, sometimes background mask does not resize to the right size. I used a fix similar to this (add this to overrides):

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