Sencha Touch Load Mask - extjs

Question

I have list and pull down to refresh plugin in it. When the refresh function fires i would like to show the load mask. But its not showing there. when i commented store.removeAll(); line i can see the loadmask working. I dont konw whats the problem with store.removeAll(). Please help me to solve this issue. Thanks in advance
{
xclass: 'Ext.ux.PullRefreshFn',
pullRefreshText: 'Pull down for refresh Contacts!',
refreshFn: function() {
console.log('pull refresh working');
Ext.Viewport.setMasked({
xtype: 'loadmask',
message: 'Please Wait...'
});
var store = Ext.getStore('Contactsstore');
store.removeAll();
var url = apiurl+'Contact.ashx?switch=GetContactList&api_id=4&getDataAgain=true';
store.getProxy().setUrl(url);
store.loadPage(1,{
callback: function (records, operation, success, response) {
if (success==1) {
Ext.Viewport.setMasked(false);
} else {
Ext.Viewport.setMasked(false);
}
}
});
Ext.getCmp('searchcontact').reset();
}
}
Here is my Store configuration
Ext.define('WinReo.store.Contactsstore', {
extend: 'Ext.data.TreeStore',
requires: [
'WinReo.model.Contactsmodel'
],
config: {
storeId: 'Contactsstore',
defaultRootProperty: 'items',
model: 'WinReo.model.Contactsmodel',
autoLoad: false,
pageSize: 20,
proxy: {
type: 'ajax',
method:'post',
id: 'Contactsstoreproxy',
url:apiurl+'Contact.ashx?switch=GetContactList&api_id=4&getDataAgain=false',
reader: {
type: 'json',
rootProperty: 'items'
}
},
listeners: {
load: function(store, records, successful, operation, eOpts) {
callback:{
succes:
if(store.getCount()!=0){
var RecordCount=store.getAt(0).get('RecordCount');
//console.log('RecordCount',RecordCount);
store.setTotalCount(RecordCount);
var storectscount = store.getTotalCount();
//Ext.Msg.alert('Store Total count',storectscount, Ext.emptyFn);
}
}
}
}
}
}
});

Answer 1

Loading masks won't get rendered until the browser has a chance to render them, and that won't happen until your Javascript code completes. I suspect that for some reason, the removeAll call isn't completing quickly (or at all), or an event listener on clear isn't completing like it needs to. Check your store's configuration for syncRemovedRecords: true and autoSync: true. You can also try removeAll(true) to keep the clear event from firing.
Update
Looking at your store definition, I can see at least one problem: Your load listener doesn't look like it's defined properly. You're defining a callback field inside of a function (which isn't going to compile), and 'succes' is misspelled. Is this what you had in mind?
load: function(store, records, successful, operation, eOpts) {
if(successful === true && store.getCount()!=0){
var RecordCount=store.getAt(0).get('RecordCount');
store.setTotalCount(RecordCount);
}
}
}