Sencha Touch Add Loading Mask on Each Ajax Request

Hello,

This is short and quick blog about how to add global logic to show and hide load mask for each Aajx request in Sencha Touch Application.

In Sencha Touch application Ajax request is used in two ways. Either one can call Ajax request with

Ext.Ajax.request({
})

Or in stores you may have Ajax proxy which will generate Ajax request when store is auto loaded or you call load method. Since this is background process you may want to show loading mask to users. For that you can call setMasked method before Ajax request and you remove that mask in success and failure function. This you have to write everywhere in your code. So it's better to add it to single place.

This how you can do it. Add following code to your launch function in your app.js file.

                Ext.Ajax.on("beforerequest", function(){
Ext.Viewport.setMasked(true);
});

Ext.Ajax.on("requestcomplete", function(){
Ext.Viewport.setMasked(false);
});

Ext.Ajax.on("requestexception(", function(){
Ext.Viewport.setMasked(false);
});

Since Ext.Ajax is singleton class we have added event handler for beforerequest, requestcomplete and requestexception.

In beforerequest event handler we are setting mask to viewport and in requestcomplete and requestexception handler we are removing it. That's it and the mask will be displayed every time there is a ajax request.  Hope this helps you.