4.0.6: LoadMask ignors target-element

[ontho]

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:

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

[hendricd]

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

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.

[ontho]

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

[oilid]

Is there also a working workaround for ExtJS 4.1?

Thanks!

[oilid]

Bump...

[ontho]

Actually, I do the loadMask myself in 4.1, like:

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

[oilid]

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

I tried the following in ExtJS 4.1.1 but without success:

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