Question

I’m just working on a web application with sencha touch. I need to implement a store (bound to a grid) which is offline available (offlineStorage) but fetches & updates data online (REST) as soon as the internet connection is available. This is necessary since I have a lot of data and I do a lot remote filtering and searching on the store. I cannot load the full store from the beginning because it is too large. Preferably I’d love to use a offlineStore for a fast user experience. New filters/requests should request data from the server (online store) and update/add it to the offlineStorage to keep in sync to the server.

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

A starting point for me is http://www.sencha.com/learn/taking-sencha-touch-apps-offline/#leave-reply. However I need to trigger the online store as soon as data is loaded from the offline storage or a filter is set.

Has anyone implemented something like this yet? Any hints/ideas how to implement it?

I really appreciate your help!!

Answer 1

Within Sencha Touch it’s really quite easy to ‘synchronize’ and online store with the fetched data to another ‘offline’ store.

Define an offline store:

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

You can now use a listener on your main store (first fetch of data) and listen to the load event (in this case manually triggered because of the ‘ autoLoad: false’.

Within the loader you ‘clear()’ the proxy of the offlinestore and then fill the offline store with data with the ‘storeId‘*.add()* function.

In my example I then delete all the information from the ‘offlinestore’ as I don’t need it anymore (it’s in the offline one now.

Online store with listener:

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

                }

            }

        });

Now when you do a new request to fetch new filters/data you can repeat the same process:

• Trigger online store (storeId.update();)
• Listener adds the data from the online store to the offlinestore
• Use the offlinestore

Supplemental:

To remove all the data from an store you can use: storeId.removeAll();

I think this will get you along in the right direction, if something is unclear please say so.