Results 1 to 4 of 4

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

    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
    67
    Vote Rating
    3
      0  

    Default [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
      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
    19
    Vote Rating
    42
      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
    23
    Vote Rating
    27
      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 });
        }
    });

Tags for this Thread

Posting Permissions

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