Sencha Touch Storage Sync

Question

Im new to Sencha Touch and still not quite sure about my data processing patterns. The way I want to configure the application is something like this:

• Retrieve user data from a remote server through AJAX.

• Save it to local storage. Any changes (editing, adding, deleting elements) update local data.

• At some point in time (when the user clicks “sync”, when the user logs out or something like that), the locally stored saved data is synchronized with the server again through an AJAX request.

So, what would be the basic structure of my application to achieve this model? And also, while we're here, is there a way to use the local database (as opposed to the local keystore) for the specified store in Sencha Touch?

Answer 1

First of all, Sencha.IO Sync provides the functionality you are looking for. It is still in beta, but it will probably do exactly what you need and you won’t need to host the database yourself: http://www.sencha.com/products/io

For me, I created applications that use the localstorage proxy for local data storage. It is super easy. Here are some examples of using a data warehouse:

• http://www.sencha.com/learn/taking-sencha-touch-apps-offline/
• http://data-that.blogspot.com/2011/01/local-storage-proxy-with-sencha-touch.html
• http://davehiren.blogspot.com/2011/09/sencha-touch-working-with-models.html
• http://www.sencha.com/learn/working-with-forms/

Later in the application, I have an AJAX call that will take all this local data and send it to the server to generate some reports.

Once you set up your stores and models correctly, it's easy to get data back from them. For example, I have a contact repository that has only one entry:

var myContactInfo = contactInfo.first().data; 

I have another store called settings, which contains many entries. I can easily get them like this (although there may be a better way):

 var settingsArr = [] settings.each(function() { settingsArr.push(this.data); }); 

Then I can easily send this to the server like this:

 var data = {settings: settingsArr, contactInfo: myContactInfo}; Ext.Ajax.request({ url: 'save.php', params: {json: Ext.encode(data)}, success: function(response, opts) { // celebrate } }); 

As with all cases, a good example of examples and APIs should help you, once you find out the basics: http://dev.sencha.com/deploy/touch/docs/?class=Ext.data.Store