Saturday, August 6, 2011

Sencha Touch offline store

Hello,

This is my first blog post on Sencha Touch. Recently I tried sencha touch and I built an application which can work offline once loaded in browser. Here I will explain how can you get your data offline in sencha touch.

First of all define an offline store with following configuration.


myApp.stores.offlineWordStore = new Ext.data.JsonStore({
    model: 'myModel',
    proxy: {
        type: 'localstorage',
        id: 'myStore'
    }
});

Here is important thing is proxy configuration. It's defined with the type localstorage. When you define proxy with local storage it will use HTML 5 local storage to store data.

Now define your online store as follow.


myApp.stores.onlineWordStore = new Ext.data.Store({
    model: 'myModel',
    proxy: {      
        url: 'http://www.example.com',
        reader: {
            type: 'json',
            root: 'wordset'
        }
    },
    listeners: {
        load: function () {
            Ext.dispatch({
                controller: myApp.controllers.general,
                action: 'setOfflineStore',
                data : this
            });
        }
    }
});

Carefully check load listener, I am calling a function of a controller where I will add all the data of online store to offline store. This is necessary because offline store can not load data directly with configuration like url. Following is the function in controller.


setOfflineStore: function (options) {
        var store = options.data;
        myApp.stores.offlineWordStore.proxy.clear();
       myApp.stores.offlineWordStore.removeAll();
        store.each(function (record) {
                var word = myApp.stores.offlineWordStore.add(record.data)[0];
        });

        myApp.stores.offlineWordStore.sync();
}

That's it and your offline store is ready to work. Now you have to load online store and it will populate data inside offline store.

myApp.stores.onlineWordStore.load();


7 comments:

  1. Hi Hiren, very good approach to syncronize offline store.
    But, after I´ve updated the offline store, how can I update the online store?

    ReplyDelete
  2. There is no method to synchronize online store with offline store. You must update online store manually.

    ReplyDelete
  3. Hiren,

    I don't understand where the options parameter into the setOffline function is being set.

    Also I don't understand where the parameter record for - function (record) is being set.

    ReplyDelete
  4. setOfflineStore store is a controller action so options are sent when you dispatch controller action. Record is parameter set when we iterate through store records using each.

    ReplyDelete
  5. Hey hiren, nice tutorial. I am working on ST2.0 app so i need the replacement of the following code:-

    Ext.dispatch({
    controller: myApp.controllers.general,
    action: 'setOfflineStore',
    data : this

    As in ST2.0 there is no Ext.dispatch() method.

    ReplyDelete
  6. Hi Hiren,

    I am not able to apply this on my code. Can you link code somewhere? I am in great need of this.

    ReplyDelete
  7. Ok i got the working example http://lalexgraham.wordpress.com/2012/09/12/sencha-touch-2-example-of-syncing-localstorage-store-with-remote-jsonp-proxy-store/?blogsub=confirming#subscribe-blog

    ReplyDelete