商店加载中的加载指示器答案

【问题标题】：Loading indicator on store loading商店加载中的加载指示器
【发布时间】：2013-10-08 08:16:59
【问题描述】：

我的商店需要时间来加载。所以我想在加载商店数据时显示加载指示器。是否有任何功能可以知道列表商店是否已完全加载？请帮帮我..我找了很久..

这是我的代码：

Ext.Viewport.setMasked({
    xtype: 'loadmask',
    message: 'Loading'
});

Ext.define('MyApp.view.Myview1', 
{
    extend: 'Ext.Panel',
    requires: ['Ext.List', 'Ext.util.JSON'],

    config: {
        layout: 'hbox',
        items: [
            {
                xtype: 'panel',
                layout: 'fit',
                flex: 1,
                items: [
                    {
                        xtype: 'list',
                        itemTpl:
                            '<div class="myContent">' +
                            '<div>{name}</div>' +
                            '</div>',
                        store: 'MainStore',
                        disclosure: true,
                        store.on({
                            load: {
                                fn: function( store ) {
                                    Ext.Viewport.setMasked(false);
                                },
                                scope: this,
                                single: true
                            }
                        });
                        store.load();
                    }
                ]
            }
        ]
    }
});

我的要求是在从存储中加载数据时显示指示器，并在列表包含存储中的所有数据后将其删除。

【问题讨论】：

标签： sencha-touch sencha-touch-2 intellisense

【解决方案1】：

您必须像下面的代码一样将加载事件绑定到此商店

  Ext.Viewport.setMasked({
     xtype: 'loadmask',
     message: 'Loading'
   });

   store.on({
    load: {
         fn: function( store ) {
            Ext.Viewport.setMasked(false);
         },
         scope: this,
         single: true
    }
});

store.load();

【讨论】：

我需要更多的建议
您能否发布您的代码，以便我可以为您提供更多信息。这里有商店意味着您商店的对象。
好的..我发布了我在问题本身中尝试过的代码。请看一下
stackoverflow.com/questions/11003605/…

【解决方案2】：

这个很简单，就像@Naresh说的一样

将负载掩码放在你的函数中

  Ext.Viewport.setMasked({
            xtype: 'loadmask',
            message: 'Please Wait...'
        });

并在商店加载后禁用加载掩码

storectn.load({
                callback: function (records, operation, success, response) {
                    if (success==1) {
                       // Ext.Msg.alert('success');
                         Ext.Viewport.setMasked(false);
                    } else {
                       // Ext.Msg.alert('Failed');
                         Ext.Viewport.setMasked(false);


                    }
                }
            });

【讨论】：

【解决方案3】：

我终于解决了这个问题:)

Sencha 在很短的时间内加载商店和列表，但加载 UI 需要很长时间。因此，在完成加载商店后，如果您使用 setTimeout 设置回调以删除指标，那么问题将得到解决。因为当 UI 加载完成时它会调用你的 final 方法，因为 JavaScript 是单线程语言。

Ext.Viewport.setMasked({
     xtype: 'loadmask',
     message: 'Loading'
   });

   store.on({
    load: {
         fn: function( store ) {
            setTimeout(function(){
                Ext.Viewport.setMasked(false);
            }, 100);
         },
         scope: this,
         single: true
    }
});

store.load();

这里即使 setTimeout 应该在 100 毫秒后被调用，它也会等待 UI 被加载，然后被调用。

如果您通过使用 store.add(Record) 的自定义查询动态加载存储，则在加载所有数据后，您只需调用 setTimeout 调用。它也会起作用。

【讨论】：

【解决方案4】：

我们需要在 sencha touch 加载数据时设置掩码（防止用户交互并显示加载消息）。 Sencha touch setMasked() 提供了将掩码添加到容器中的选项。但是每次我们都需要手动添加遮罩和移除遮罩。我们可以使用存储侦听器来手动执行此操作。

我的要求是我有一个用于 CRUD 流程的商店。所以每次我尝试同步和加载数据时，我都想设置视图的掩码。我的商店代码如下所示。

我为此任务使用了 beforeload、beforesync、load、metachange、removerecords、updaterecord、write、addrecords 事件。

请通过单击链接访问以下网址以获取完整的源代码。 [通过解决方案解决]

http://saravanakumar.org/blog/2014/04/sencha-touch-setmask-display-load-mask-or-waiting-while-loading-data-in-store/

【讨论】：