Sencha Touch Load 面膜

Posted 2023-02-25

【中文标题】Sencha Touch Load 面膜

【英文标题】：Sencha Touch Load Mask

【发布时间】：2013-11-21 11:20:12

【问题描述】：

我有列表并下拉刷新插件。当刷新功能触发时，我想显示加载掩码。但它没有在那里显示。当我评论store.removeAll(); 行时，我可以看到负载掩码工作。我不知道 store.removeAll() 有什么问题。请帮我解决这个问题。在此先感谢

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

这是我的商店配置

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

                


            

        
     
    

);

【参考方案1】：

在浏览器有机会渲染它们之前，不会渲染加载蒙版，并且在您的 javascript 代码完成之前不会发生这种情况。我怀疑由于某种原因，removeAll 调用没有快速完成（或根本没有完成），或者clear 上的事件侦听器没有像它需要的那样完成。检查您商店的 syncRemovedRecords: true 和 autoSync: true 配置。您也可以尝试removeAll(true) 来阻止clear 事件触发。

更新

查看您的商店定义，我至少可以看到一个问题：您的load 侦听器看起来定义不正确。您在函数内部定义了一个 callback 字段（不会编译），并且“succes”拼写错误。这是你的想法吗？

       load: function(store, records, successful, operation, eOpts) 
            if(successful === true && store.getCount()!=0)
                    var RecordCount=store.getAt(0).get('RecordCount');
                    store.setTotalCount(RecordCount);
                
            
        

【讨论】：

这可能是我有一个大型树存储的原因，所以当我使用 removeAll() 时，它会花费太多时间来删除记录。尝试了 remoeAll(true) 并检查了我的商店配置。但没有成功。我已经编辑了我的问题并附上了我的商店代码。你能检查一下吗..提前谢谢

感谢您的快速响应，更改了我的商店回调功能，但加载掩码问题仍然存在。

我正在使用这个插件docs.kawanoshinobu.com/touch/#!/api/Ext.ux.AccordionList 来建立一个手风琴列表。所以我正在加载一个树库。我不知道是它非常慢的原因。你找到任何解决方案了吗，请告诉我

Dibish...您可以使用非常小的测试数据集试用商店，看看是否有帮助。

现在它可以工作了，正如你所说，我的商店需要太多时间来清除数据。现在正在使用 storectn.data.clear();快速清除存储而不是 store.removeAll()。我将您的答案标记为正确，它给了我解决我的问题的宝贵建议