Sencha Touch is java framework to build web mobile application. In this post I will note about how to store data in LocalStorage this take advantage to make application work offline.
We need to create 2 data store object as below:
store to load data from online server.
this.store = new Ext.data.Store({
autoLoad: true,
model: 'Icons',
proxy: {
type: 'ajax',
url: 'jsons/icons.json',
reader: {
type: 'json',
root: 'icons'
}
}
});
store to save data from store that load form online server to localStorage
this.offlineStore= new Ext.data.Store({
model: 'Icons',
proxy: new Ext.data.LocalStorageProxy({
id:'data',
proxy:{idProperty:'id'}
}),
autoLoad: true,
autoSave: true
});
Create event handler to catch if application is connect to server or cannot connect to server.
1. When application connected to the server, load event of object store will fire. so we will update data from store to offlineStore
this.store.on('load',function(store,records,opts){
console.log("load from online");
this.offlineStore.proxy.clear();
this.store.each(function (record){
var iconEach = this.offlineStore.add(record.data)[0];
},this);
this.offlineStore.sync();
},this);
2. When application can not connected to the server, exception event of object store will fire, so we set timeout to the store to load data from server, if timeout is reach , store still cannot load data, so we load data from offlineStore instead.
this.store.proxy.addListener('exception', function (proxy, response, operation) {
console.log("load from offline");
this.orbitIcons.bindStore(this.offlineStore);
this.offlineStore.load();
},this);
The process of this should illustrate as image below:
