View Full Version : LoadMask z-index

1 Feb 2013, 10:44 AM

I have in a viewport a few panels. One of them is a gridpanel, and when the store of the gridpanel reloads, a loadmask is shown (which is of course what i want).

Now when the user clicks on a button, a new window opens. Then when the user clicks on a button in the window, the gridpanel (behind it) must be reloaded. So i let it reload the gridpanel's store.

Now's the problem: although it succesfully reloads the store, and the gridpanel is updated, the moment of loading the loadmask (plus the box of the gridpanel around it) is shown on top of the window -> and that's not what i want, it's ugly.

How can i set it so that the loadmask is on top of the gridpanel, but not on top of the window?

4 Feb 2013, 1:11 PM
The ZIndexManager should be managing the floating components properly and there have been some bug fixes. What Ext JS 4.x.x version are you using?

4 Feb 2013, 2:10 PM
ExtJS version 4.1.1a

5 Feb 2013, 12:07 AM
I had a similar problem and on the forum I had found the following override, it work for me, but I don't take any credit nor responsibility on it. Try if it do the job:

/** * Class that define an override for bug in masking
Ext.define('Ext.form.SubmitFix', {
override: 'Ext.ZIndexManager',

register : function (comp) {
var me = this,
compAfterHide = comp.afterHide;

if (comp.zIndexManager) {
comp.zIndexManager = me;

me.list[comp.id] = comp;

// Hook into Component's afterHide processing
comp.afterHide = function () {
compAfterHide.apply(comp, arguments);

* Unregisters a {@link Ext.Component} from this ZIndexManager. This should not
* need to be called. Components are automatically unregistered upon destruction.
* See {@link #register}.
* @param {Ext.Component} comp The Component to unregister.
unregister : function (comp) {
var me = this,
list = me.list;

delete comp.zIndexManager;
if (list && list[comp.id]) {
delete list[comp.id];

// Relinquish control of Component's afterHide processing
delete comp.afterHide;
Ext.Array.remove(me.zIndexStack, comp);

// Destruction requires that the topmost visible floater be activated. Same as hiding.