Ext.LoadMask stays in background of the loading panel

I try to show a loading mask while user waits for the panel to be shown.

I use Ext.LoadMask like :

loadingMask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading..."});

loadingMask.show();
panel =开发者_运维问答 new MyPanel();
panel .show();

and in panel's afterrender

this.listeners = {
        afterrender: function () {
        loadingMask.hide();
        }
}

But no loading mask is shown till panel comes and when I close panel I see the loading Mask.

I think this means my loading mask is running in background so I can't see it.

Is there solution you know for this issue ? This seems like a layer problem I think.

How can I make loading mask be shown on top and in panel's afterrender hide it?

Thank you.

---

I think you're looking for something like this:

 Ext.onReady(function(){
            var loadingMask = new Ext.LoadMask(Ext.getBody(), {
                msg: "Loading..."
            });

            loadingMask.show();
            var panel = new Ext.Panel({
                renderTo: 'div1',
                width: 100,
                height: 100,
                title: 'MyPanel',
                listeners: {
                    afterrender: function(){
                        loadingMask.hide();
                    }
                }
            });         

        });

I've included the renderTo config option to tell Ext where to create the panel on the page. Apart from a couple of spelling mistake in your example, I think the main problem is that your afterrender handler is not firing because you are not attaching it to your panel object. You need to assign it as part of your config options. You are assigning your afterrender handler to 'this' which could quite possibly be the top level window object in your example.

---

This might work for you:

Add loading mask

Ext.getBody().mask('Loading...', 'x-mask-loading', false);

Remove loading mask

Ext.getBody().unmask();

---

I put MyPanel's show function in delayedtask. Then I put the unmask implementation in beforedestroy listener of MyPanel. There should be some callback mechanism for this LoadMask thing i think. When I put show following one and other layers get messed up.