I see multiple loading masks when two Ajax requests are called parellely

Question

In my sencha touch app whenever I call an Ajax request I set a loading mask on the screen until some response is sent back but lets say I have more than one Ajax request executing at the same time, I see multiple loading masks. How do I stop this from happening. I tried to put a check like

if(Ext.Viewport.getMasked()){
//bypass
}
else {
Ext.Viewport.setMasked({
                xtype: 'loadmask'
            });
}

But this not seem to work and when request is completed I do this

Ext.Viewport.unmask();

But my problem is that I see two masks if e.g. two requests are running parallely. Is there is a way to prevent this from happening.

I am using Sencha touch 2.3.0

Answer 1

Your problem might be that you are doing Ext.Viewport.getMasked instead of Ext.Viewport.getMasked(). Regardless, if you are setting multiple loadmasks on the same component (in this case, Viewport) the new one will replace the older. Most likely you are setting these masks on different components, which is why you are seeing more than one.

Here is a link to a Sencha Fiddle showing how Viewport loadmasks replace. If you are still having issues, please share some code.