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!

About Peter Kellner

Peter is a software professional specializing in mobile and web technologies. He has also been a Microsoft MVP for the past 7 years. To read more about Peter Kellner and his experience click here. For information about how Peter Kellner might be able to help you with your project click here.

Follow me:


Comments

  1. Peter Kellner says:

    When I look back at this code it makes me shudder a little. I should be using relative up down to get the component and I should not call getValues() three times. I should probably also use get(“username”) instead.

  2. This works fine, but if we have to redirect to another view showing the loading mask and remove it once the page loading is complete. How can that be achieved?

Your Comments

*

Protected with IP Blacklist CloudIP Blacklist Cloud

Follow

Get every new post delivered to your Inbox

Join other followers: