Results 1 to 8 of 8

Thread: Ext.WindowManager: Mask resize should be after viewport resize

    This duplicates another forum thread, you can visit that thread here.
  1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    29
    Vote Rating
    6
      3  

    Default Ext.WindowManager: Mask resize should be after viewport resize

    This is an old problem I guess since v4.x but this subtle bug still exists with v5.x, here is a reference:
    http://stackoverflow.com/questions/1...esize-properly

    When you have a ViewPort and a child modal Window and you resize the browser window to be bigger, the background mask of the window does not resize to the final size of the ViewPort. This is because Ext.WindowManager (singleton) listens for global Resize event which is called before ViewPort updates its layout (size) so the mask is resized according to the old size not the final size.

    Before 5.1.1.183, I was using the below override to fix the issue:
    PHP Code:
    //Target: 5.1.1.150, 5.0.2.1411, 5.0.1.1255, 5.0.0.970
    //Modal window background mask should be resized after viewport resize
    //If there is no delay, it's not resized to the new size
    //Can not override the constructor for ZIndexManager or WindowManager so the fix is here (possibly because WindowManager is already instantiated)
    Ext.onReady(function () {
        
    Ext.un('resize'Ext.WindowManager._onContainerResizeExt.WindowManager);
        
    Ext.on('resize'Ext.WindowManager._onContainerResizeExt.WindowManager, { delay50 });
    }); 
    Now with 5.1.1.183, _onContainerResize function was renamed to onContainerResize. I also dug further to find a better fix because using a delay may not be reliable in all cases. Here is my final fix:

    PHP Code:
    //Target: 5.1.1.183
    Ext.onInternalReady(function () {
        
    Ext.un('resize'Ext.WindowManager.onContainerResizeExt.WindowManager);
        
    Ext.on('responsiveupdate', function () {
            
    Ext.resumeLayouts(true);
            
    Ext.WindowManager.onContainerResize();
        });
    }); 
    Details on the fix:
    I found out that ViewPort resize was done by Ext.mixin.Responsive which listens to global Resize event too but uses a timer to sync to browser animation frame and this timer runs notify function below:

    PHP Code:
    //From Ext.mixin.Responsive class:

                    
    notify: function() {
                        var 
    all Responsive.all,
                            
    context Responsive.context,
                            
    globalEvents Ext.GlobalEvents,
                            
    timer Responsive.timer,
                            
    id;
                        if (
    timer) {
                            
    Responsive.timer null;
                            
    Ext.Function.cancelAnimationFrame(timer);
                        }
                        
    Responsive.updateContext();
                        
    Ext.suspendLayouts();
                        
    globalEvents.fireEvent('beforeresponsiveupdate'context);
                        for (
    id in all) {
                            
    all[id].setupResponsiveContext();
                        }
                        
    globalEvents.fireEvent('beginresponsiveupdate'context);
                        for (
    id in all) {
                            
    all[id].updateResponsiveState();
                        }
                        
    globalEvents.fireEvent('responsiveupdate'context);
                        
    Ext.resumeLayouts(true);
                    }, 
    As this function is called out of the context of the Resize event, you can not make sure other Resize event handlers are called after it unless you use a delay like 50 ms. So to make sure that Ext.WindowManager.onContainerResize is called after ViewPort is resized, I made the override above to listen for responsiveupdate instead of resize event. However, to be able to get the correct size I still needed to call Ext.resumeLayouts(true) in responsiveupdate event handler before calling Ext.WindowManager.onContainerResize. This is because responsiveupdate event is fired before Ext.resumeLayouts(true); line in notify function above.

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Vote Rating
    293
      -1  

    Default

    Thanks for the report and workarounds. Looks like we're tracking this issue here:
    http://www.sencha.com/forum/showthread.php?295917

  3. #3
    Sencha Premium User
    Join Date
    Oct 2014
    Posts
    3
    Vote Rating
    1
      1  

    Default

    Quote Originally Posted by Gary Schlosberg View Post
    Thanks for the report and workarounds. Looks like we're tracking this issue here:
    http://www.sencha.com/forum/showthread.php?295917
    Surprisingly this is STILL a bug in latest v6.0.1:

    https://fiddle.sencha.com/#fiddle/15lr

    I cannot believe it.

  4. #4
    Sencha User
    Join Date
    May 2013
    Posts
    29
    Vote Rating
    6
      1  

    Default

    Lol, you are correct, they still did not fix it. Even I always write in details about a bug and even I give a fix to them, they don't include half of these fixes. Nevermind, you can still use my fix with v6.0.1 (I still do so):

    PHP Code:
    //Modal window background mask should be resized after viewport resize
    //If there is no delay, it's not resized to the new size
    //Can not override the constructor for ZIndexManager or WindowManager so the fix is here (possibly because WindowManager is already instantiated)
    Ext.onInternalReady(function () {
        
    Ext.un('resize'Ext.WindowManager.onContainerResizeExt.WindowManager);
        
    Ext.on('responsiveupdate', function () {
            
    Ext.resumeLayouts(true);
            
    Ext.WindowManager.onContainerResize();
        });
    }); 

  5. #5
    Sencha Premium User
    Join Date
    Oct 2014
    Posts
    3
    Vote Rating
    1
      0  

    Default

    Quote Originally Posted by gtdev View Post
    Lol, you are correct, they still did not fix it. Even I always write in details about a bug and even I give a fix to them, they don't include half of these fixes. Nevermind, you can still use my fix with v6.0.1 (I still do so):

    PHP Code:
    //Modal window background mask should be resized after viewport resize
    //If there is no delay, it's not resized to the new size
    //Can not override the constructor for ZIndexManager or WindowManager so the fix is here (possibly because WindowManager is already instantiated)
    Ext.onInternalReady(function () {
        
    Ext.un('resize'Ext.WindowManager.onContainerResizeExt.WindowManager);
        
    Ext.on('responsiveupdate', function () {
            
    Ext.resumeLayouts(true);
            
    Ext.WindowManager.onContainerResize();
        });
    }); 
    Thanks man.

    Does your patch look something similar to mine?
    overrides/patches/ZIndexManager.js
    Code:
    Ext.define("xxx.patches.ZIndexManager", {
        override: "Ext.ZIndexManager",
    
    
        _alreadyCalled: false,
    
    
        compatibility: "6.0.1-",
    
    
        /*
         * Fixes bug with mask NOT resizing after viewport resize
         */
        register: function (comp) {
    
    
            this.callParent(arguments);
    
    
            if (this._alreadyCalled === false) {
    
    
                Ext.onInternalReady(function () {
                    // Ext.WindowManager.onContainerResize references the same function as
                    // Ext.ZIndexManager.privates -> onContainerResize
                    Ext.un("resize", Ext.WindowManager.onContainerResize, Ext.WindowManager);
                    Ext.on("responsiveupdate", function () {
                        Ext.resumeLayouts(true);
                        Ext.WindowManager.onContainerResize();
                    });
                });
    
    
                this._alreadyCalled = true;
            }
        }
    
    
    });
    I couldn't extend constructor, so I have used _alreadyCalled to avoid duplicating events, as register is called several times during the app lifetime.

  6. #6
    Sencha User
    Join Date
    May 2013
    Posts
    29
    Vote Rating
    6
      0  

    Default

    Actually I am following a simpler approach for including patches, I put them in a separate file (eg. ext-overrides.js) and then include this js file after the offical ext-all.js in the page So I am not using custom builds. However your patch above looks like it's correct as you avoid duplicating events.

  7. #7
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Vote Rating
    293
      0  

    Default

    This has been fixed for 5.1.3 and 6.0.2.

  8. #8
    Sencha User
    Join Date
    Aug 2018
    Posts
    2
    Vote Rating
    0
      0  

    Default

    I am still receiving these bugs in 6.5.x classic, but this hack fixed it.
    Thanks!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •