Sencha Touch storage sync

Question

I’m new to Sencha Touch and still not quite confident with its data handling patterns. The way I want to set up my application is something like this:

1. Retrieve the user’s data from the remote server via AJAX.

2. Save it in the local storage. Any modifications (editing, adding, deleting items) update the local data.

3. At some point in time (when the user clicks ‘sync’, when the user logs out, or something like that), the locally stored stored data is synced with the server, again, through an request AJAX.

So what would the basic structure of my application be, to achieve this pattern? And also, while we are here, is there a way to use a local database (as opposed to local key-value storage) for a specified store in Sencha Touch?

Answer 1

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

For me I've built apps that use the localstorage proxy to store data locally. It's super easy. Here are a couple of examples of using data storage:

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

Later in the app I have an AJAX call that will take all of that local data and send it up to the server to generate some reports.

Once you have your stores and models setup correctly it's easy to get the data back out of them. For example I have a contactInfo store that only ever has one entry:

var myContactInfo = contactInfo.first().data;

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

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

I then can easily send this up to the server like so:

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 things a good look at the examples and the API should help you once you have the basics figured out: http://dev.sencha.com/deploy/touch/docs/?class=Ext.data.Store