You found a bug! We've classified it as EXTJS-3976 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    260
    Vote Rating
    7
    ontho is on a distinguished road

      0  

    Default 4.0.6: LoadMask ignors target-element

    REQUIRED INFORMATION


    Ext version tested:
    • Bug occurs in 4.0.5 and 4.0.6
    • Works in 4.0.2a


    Browser versions tested against:
    • FF6.0.1
    • Chrome 13


    Description:
    • LoadMask ignors a given target-element


    Steps to reproduce the problem:
    • Create a LoadMask on a grid with a target other then the grid


    The result that was expected:
    • The loading-mask should cover the whole browser-window.


    The result that occurs instead:
    • The loading-mask covers only the grid.


    Test Case:

    Code:
    Ext.define('Ext.ux.MyGrid',
    {    extend: 'Ext.grid.Panel',
        
        constructor: function(config)
        {   Ext.applyIf(config.viewConfig,
            {    loadMask: new Ext.LoadMask(Ext.getBody(), 
                {    msg: "My Loading text..."
                })
            });
            this.callParent(arguments);
        }
    });

  2. #2
    Sencha - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,964
    Vote Rating
    11
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default

    @ontho --

    Regression*

    AbstractViews do not currently support a unique instance of a LoadMask. Only a configuration object. Thus, you cannot target another Element or Component at this time without this override or equivalent:
    Code:
    Ext.override (Ext.view.AbstractView , {
        
          onRender: function() {
              var me = this,
                 mask = me.loadMask,
                 cfg = {                 
                     msg: me.loadingText,
                     msgCls: me.loadingCls,
                     useMsg: me.loadingUseMsg
                 };
              me.callParent(arguments);
              if (mask) {             // either a config object
                 if (Ext.isObject(mask)) {
                     cfg = Ext.apply(cfg, mask);
                 }
                 // Attach the LoadMask to a *Component* so that it can be sensitive to resizing during long loads.
                 // If this DataView is floating, then mask this DataView.
                 // Otherwise, mask its owning Container (or this, if there *is* no owning Container).
                 // LoadMask captures the element upon render.
                 me.loadMask = Ext.isFunction(mask.isDescendantOf) ? mask : Ext.create('Ext.LoadMask', me, cfg);
                 me.loadMask.on({
                     scope: me,
                     beforeshow: me.onMaskBeforeShow,
                     hide: me.onMaskHide
                 });
             }
         }
    })
    Additional overrides may be necessary for grid.Panel.reconfigure as well.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  3. #3
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    260
    Vote Rating
    7
    ontho is on a distinguished road

      0  

    Default

    Thanks for your reply, your workaround works to disable the whole body, so thanks a lot.

  4. #4
    Sencha Premium Member
    Join Date
    Jan 2011
    Posts
    17
    Vote Rating
    0
    oilid is on a distinguished road

      0  

    Default

    Is there also a working workaround for ExtJS 4.1?

    Thanks!

  5. #5
    Sencha Premium Member
    Join Date
    Jan 2011
    Posts
    17
    Vote Rating
    0
    oilid is on a distinguished road

      0  

    Default

    Bump...

  6. #6
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    260
    Vote Rating
    7
    ontho is on a distinguished road

      0  

    Default

    Actually, I do the loadMask myself in 4.1, like:
    Code:
    constructor: function(config)
    { this.myLoadMask = new Ext.LoadMask(Ext.getBody(), 
            {    msg: "Loading..."
            }) 
    
    config.store.listeners =
                {    beforeload:
                    {    fn: function (me, operation, eOpts)
                        {  this.myLoadMask.show();
                             return true;                        
                        }
                    },
                    load: 
                    {    fn: function (me, records, success, operation, eOpts)
                        {    this.myLoadMask.hide();
                         }     
                    }
                }
    
       this.callParent(arguments);
    },

  7. #7
    Sencha Premium Member
    Join Date
    Jan 2011
    Posts
    17
    Vote Rating
    0
    oilid is on a distinguished road

      0  

    Default

    Hmm... Is there maybe a working override for this?

    I tried the following in ExtJS 4.1.1 but without success:

    Code:
    Ext.override (Ext.view.AbstractView , {
        
          onRender: function() {
            var me = this,
                mask = me.loadMask,
                cfg = {
                    msg: me.loadingText,
                    msgCls: me.loadingCls,
                    useMsg: me.loadingUseMsg,
                    // The store gets bound in initComponent, so while
                    // rendering let's push on the store
                    store: me.getMaskStore()
                };
    
            me.callParent(arguments);
    
            if (mask) {
                // either a config object 
                if (Ext.isObject(mask)) {
                    cfg = Ext.apply(cfg, mask);
                }
                // Attach the LoadMask to a *Component* so that it can be sensitive to resizing during long loads.
                // If this DataView is floating, then mask this DataView.
                // Otherwise, mask its owning Container (or this, if there *is* no owning Container).
                // LoadMask captures the element upon render.
    //            me.loadMask = new Ext.LoadMask(me, cfg);
                me.loadMask = Ext.isFunction(mask.isDescendantOf) ? mask : new Ext.LoadMask(me, cfg);
                me.loadMask.on({
                    scope: me,
                    beforeshow: me.onMaskBeforeShow,
                    hide: me.onMaskHide
                });
            }
        }
    });

Thread Participants: 2