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

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