1

我只是在使用 sencha touch 开发一个 Web 应用程序。我需要实现一个离线可用的商店（绑定到网格）（offlineStorage），但只要互联网连接可用，就会在线获取和更新数据（REST）。这是必要的，因为我有很多数据，并且我在商店中进行了很多远程过滤和搜索。我无法从一开始就加载完整的商店，因为它太大了。最好我喜欢使用离线商店来获得快速的用户体验。新的过滤器/请求应从服务器（在线商店）请求数据并将其更新/添加到离线存储以与服务器保持同步。

Grid <-bind-> Store (offlineStorage) <-request remote data on new filter-> online Store

我的起点是http://www.sencha.com/learn/taking-sencha-touch-apps-offline/#leave-reply。但是，一旦从离线存储加载数据或设置过滤器，我就需要触发在线商店。

有没有人实施过这样的事情？任何提示/想法如何实现它？

我真的很感谢你的帮助！！

4

1 回答 1

3

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

定义线下商店：

    // Offline store (local storage)
    var schouwLijstOffline = new Ext.data.Store({
        model: "schouwLijst",
        storeId: 'schouwLijstOffline',
        proxy: {
            type: 'localstorage',
            id: "schouwid"
        },
    });

您现在可以在主存储上使用侦听器（第一次获取数据）并侦听加载事件（在这种情况下，由于“autoLoad：false”而手动触发。

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

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

带监听器的在线商店：

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

我认为这将使您朝着正确的方向前进，如果有不清楚的地方，请直说。

于 2011-11-21T17:43:41.387 回答