Ext.LoadMask stays in background of the loading panel

Question

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.

Answer 1

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.