Sencha Touch Load Mask

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);
                        }

                }


            }

        }
    } 
    }

});

sherb sherb · Accepted Answer · 2013-12-08T20:02:58

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);
                }
            }
        }

Sencha Touch Load Mask

1 Answers