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

---

@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.

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

Is there also a working workaround for ExtJS 4.1?

Thanks!

Bump...

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

---

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

---