Automatically showing & hiding a LoadMask for every Ajax request made in Sencha Touch 2

This post describes an easy way to show and hide a Load Mask  automatically for every Ajax request made in Sencha Touch 2 based application.

Usually, Load mask is used to indicate the user  that something was happening in the background and also it prevents the user action until the application finished the current process.

It is achieved in the sencha touch based application by simply Adding the mask to the Viewport  in the beforerequest event of ajax control  and removing it in the requestcomplete & requestexception event of ajax control.

//Fires before a network request is made to retrieve a data object.

Ext.Ajax.on(‘beforerequest’, function (con, opt) {

        //To show the mask

Ext.Viewport.setMasked({
xtype: ‘loadmask’,
message: ‘Please wait…’,
indicator: true
});

}, this);

//Fires if the request was successfully completed and hide the mask.
Ext.Ajax.on(‘requestcomplete’, function (con, res, opt) {

         //To hide the mask

Ext.Viewport.setMasked(false);

}, this);

//Fires if an error HTTP status was returned from the server  and hide the mask.
Ext.Ajax.on(‘requestexception’, function (con, response, opt) {

         //To hide the mask

Ext.Viewport.setMasked(false);

}, this);

So it will display the load mask once the request is made and hiding the mask once the request is completed or received an error status automatically.

That’s it.

About these ads