Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User ludoo's Avatar
    Join Date
    Mar 2007
    Location
    France
    Posts
    60
    Vote Rating
    2
    ludoo is on a distinguished road

      0  

    Default [4.1.0] After window resize, viewport can be scrolled because mask is not resized.

    [4.1.0] After window resize, viewport can be scrolled because mask is not resized.


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.1.0

    Browser versions tested against:
    • FF12
    • Chrome 18

    DOCTYPE tested against:
    • Any

    Description:
    • After a window resize, hidden masks are not resized.
      It causes trouble in full layout.
      It occurs especially on viewport. I didn't try yith another layout.

    Steps to reproduce the problem:
    The result that was expected:
    • No scroll

    The result that occurs instead:
    • the whole page scrolls down!!!

    HELPFUL INFORMATION

    Screenshot or Video:
    See this URL for live test case: http://dev.sencha.com/deploy/ext-4.1...d-loading.html


    Debugging already done:
    • none

    Possible fix:
    • It's probably because mask is visibility:hidden instead display:none
      but hideMode on LoadMask has no effect.
    • or force resize mask even hidden:
      Code:
      Ext.override(Ext.LoadMask, {
      	sizeMask: function() {
              var me = this, target;
              if (me.rendered /*&& me.isVisible()*/) {
                  me.center();
                  target = me.getMaskTarget();
                  //me.getMaskEl().show().setSize(target.getSize()).alignTo(target, 'tl-tl');
                  me.getMaskEl().setSize(target.getSize()).alignTo(target, 'tl-tl');
              }
          },
      });

    Additional CSS used:
    • -

    Operating System:
    • Win7
    Last edited by ludoo; 10 May 2012 at 4:22 AM. Reason: add a workaround

  2. #2
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    2
    Vote Rating
    1
    tijuana is on a distinguished road

      1  

    Default


    LoadMask hides its element, not itself, via this.getMaskEl().hide(). I guess that's why hideMode on LoadMask has no effect. Here's a solution to hide it using DISPLAY mode:

    Code:
    Ext.override(Ext.LoadMask, {
        getMaskEl: function() {
            var maskEl = this.callParent(arguments);
            maskEl.setVisibilityMode(Ext.dom.AbstractElement.DISPLAY);
            return maskEl;
        }
    });

  3. #3
    Sencha Premium Member
    Join Date
    Jun 2013
    Posts
    18
    Vote Rating
    35
    jylaxx will become famous soon enough jylaxx will become famous soon enough

      0  

    Default


    This bug still exists in 4.2.1 !!

    BTW the workaround seams to work...

  4. #4
    Sencha User
    Join Date
    May 2011
    Posts
    19
    Vote Rating
    24
    Decoy Deluxe will become famous soon enough Decoy Deluxe will become famous soon enough

      0  

    Default


    This was an issue for me too, the fix was very useful!

    I've put mine in a single afterrender handler so it's only run once per Mask, instead of each time getMaskEl() is run:

    Code:
    Ext.define('App.override.LoadMask', {
        override : 'Ext.LoadMask', 
    
        initComponent : function () {
            var me = this;
            
            me.callParent(arguments);
    
            me.on('afterrender', function() {
                me.getMaskEl().setVisibilityMode(Ext.dom.AbstractElement.DISPLAY);
            }, me, { single : true });
        }
    });