Display Load Mask (Waiting…) with Sencha Touch on Ajax Call

One of the nice features of using Sencha Touch (and ExtJS for that matter) lists (Ext.dataview.List) is that you can simply set the parameter masked to true and when the store retrieves data, a nice “loading” make appears letting your user know that something is happening and the browser is just not frozen while we wait for data. (example follows):

Ext.create('Ext.List', {
    fullscreen: true,
    itemTpl: '{title}',
    store: 'mystore',
    masked: { xtype: 'loadmask',message: 'loading' }
});

If you want to get data using Sencha Touch and the Ext.Ajax method, you don’t get this nice masked option so you have to do it yourself.

The strategy is basically this:

1. Create a task that will put up a load mask when the task completes
2. run the task for some short time (like 1/2 a second)
3. Start your Ext.Ajax call (waiting for success or failure event)
4. On Success on Failure of Ext.Ajax cancel the task and remove the mask (if showing), the do appropriate action Since JavaScript is single threaded we don’t have to worry about concurrency issues like race conditions so this is guaranteed to work.  Below is some sample code I’m using in the Silicon Valley Code Camp web site mobile application to process login.  (this is the code that gets executed when tapping on the login button).

he below method is actually calling a Microsoft ASP.NET WebAPI server. I’ve put a Thread.Sleep(3000) in the service call so I can see the load mask happening in testing.

var basePanel = 
    Ext.ComponentQuery.query("toppanel")[0];
var loginFormPanel = 
    Ext.ComponentQuery.query("loginformpanel")[0];

var task = Ext.create('Ext.util.DelayedTask', function() {
    Ext.Viewport.mask({ xtype: 'loadmask',
                       message: "Checking Credentials.." });
}, this);

task.delay(500);

// do login and if success, 
//   flip, otherwise show error
Ext.Ajax.request({
    url:'/rpc/Account/Login', 
    params: {
        Username: loginFormPanel.getValues().username,
        Password: loginFormPanel.getValues().password,
        RememberMe: loginFormPanel.getValues().rememberMe != null
    },
    success: function(response){
        task.cancel(); 
        Ext.Viewport.unmask(); 
        basePanel.animateActiveItem(1,{type: 'flip' });
    },
    failure: function() {
        task.cancel(); 
        Ext.Viewport.unmask(); 
        Ext.Msg.alert("Login Failed");
    }
});

HTH’s!