关于 extjs:Sencha Touch – 离线应用程序与离线存储同步到在线商店。按需获取在线数据并添加到offlineStoreage

Sencha Touch - Offline Application with offlineStorage synced to a online store. Fetch online data on demand and add to offlineStoreage我正在开发一...

我正在开发一个带有 sencha touch 的 Web 应用程序。我需要实现一个离线可用(offlineStorage)但获取的商店(绑定到网格)

相关讨论


在 Sencha Touch 中,将获取的数据"同步"和在线商店到另一个"离线"商店非常容易。

定义一个离线商店:

1
2
3
4
5
6
7
8
9
    // Offline store (local storage)
    var schouwLijstOffline = new Ext.data.Store({
        model:"schouwLijst",
        storeId: 'schouwLijstOffline',
        proxy: {
            type: 'localstorage',
            id:"schouwid"
        },
    });

您现在可以在主存储上使用侦听器(第一次获取数据)并侦听加载事件(在这种情况下,由于"autoLoad: false"而手动触发。

在加载器中,您"clear()"离线存储的代理,然后使用"storeId"*.add()* 函数将数据填充到离线存储。

在我的示例中,然后我从"离线商店"中删除所有信息,因为我不再需要它(它现在在离线商店中。

带有监听器的在线商店:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var schouwLijstStore = new Ext.data.Store({

            model:"schouwLijst",
            storeId:"schouwLijstStore",
            proxy: {
                type: 'ajax',
                url: 'php/json.php?t=list',
                reader: {
                    type: 'json',
                    root: 'list'
                },  
            },    
            autoLoad: false,
            listeners: {
                load: function() {

                    // Clear proxy from offline store
                    schouwLijstOffline.proxy.clear();

                    // Loop through records and fill the offline store
                    this.each(function(record) {

                        schouwLijstOffline.add(record.data);

                    });

                    // Sync the offline store
                    schouwLijstOffline.sync();

                    // Remove data from online store
                    schouwLijstStore.removeAll();

                }

            }

        });

现在,当您发出新请求以获取新过滤器/数据时,您可以重复相同的过程:

  • 触发在线商店 (storeId.update();)
  • 侦听器将数据从在线商店添加到离线商店
  • 使用离线商店

补充:

要从存储中删除所有数据,您可以使用:storeId.removeAll();

我认为这会让你朝着正确的方向前进,如果有不清楚的地方请说出来。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

ExtJS, SenchaTouch - FormPanel can't load values from a store?如何将值从商店加载到表单面板中?我在这里构建了一个完整的示例。我不确定为什么我的表单...
ExtJS 3.x DateField menuListeners show/hide每当我的 DateField 上发生显示/隐藏事件时,我都会尝试调用一些函数。我相信这些应该在菜单小部件打开和关闭时...
Resolving Dirty Flag in Ext.grid.Panel cell在 Ext JS 网格中,我正在编辑单个单元格。在其中一列中,我有一个触发 Save 事件的 Save 按钮。如何删除已编辑...
Ext.ux.form.field.DateTime questions我创建了一个 Ext.ux.form.field.DateTime 插件,但这里有一些问题:如果我不设置宽度/高度,则工具栏中的 DateTime 丢...
HTML Form to ExtJS Form我有一个 html 表单,其中的字段非常分散。该页面是使用 html 表 - rowspan 和 colspan 组合创建的。我需要将此表单转换为 ExtJS 并...