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.
-
Ext JS Premium Member
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:
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.
-
Ext JS Premium Member
Thanks for your reply, your workaround works to disable the whole body, so thanks a lot.
-
Sencha Premium Member
Is there also a working workaround for ExtJS 4.1?
Thanks!
-
Sencha Premium Member
-
Ext JS Premium Member
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);
},
-
Sencha Premium Member
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
});
}
}
});