Question

I have setup a SenchaTouch/PhoneGap app that pulls information from an external XML feed. My problem is this will obviously only work when online.

How do I go about storing the information from the external feed in the local storage to be used offline?

Here is the app data store code:

App.eventstore = new Ext.data.Store({
    model: 'Event',
    sorters: 'title',
    autoLoad: true,

    getGroupString : function(record) {
        return record.get('title')[0];
    },

    proxy: {
        type: 'ajax',
        url: 'http://the-url-to-the-file.xml',
        reader: {
            idProperty: 'id',
            type: 'xml',
            root: 'events',
            record: 'event'
        }
    }
});
App.eventstore.read();

Update after Ilya139’s answer:

I’ve implemented the code, but now my list is empty… 🙁

Store

App.eventstore = new Ext.data.Store({
    model: 'Event',
    sorters: 'title',
    autoLoad: true,

    getGroupString : function(record) {
        return record.get('title')[0];
    },

    proxy: {
        type: 'ajax',
        url: 'http://the-url-to-the-file.xml',
        reader: {
            idProperty: 'id',
            type: 'xml',
            root: 'events',
            record: 'event'
        }
    }
});

App.eventstore.read();

App.eventstore.each(function(record){record.save();});

App.offlineeventstore = new Ext.data.Store({
    model: 'Event',
    sorters: 'title',
    autoLoad: true,

   getGroupString : function(record) {
    return record.get('title')[0];
   },

   proxy: {
      type: 'localstorage',
      id:'events'
    }
});

App.offlineeventstore.read();

Model

Ext.regModel('Event', {
    fields: [
        {name: 'id', mapping: '@id', type: 'integer'},
        {name: 'title', type: 'string'},
        etc etc...
    ],

    proxy: {
       type: 'localstorage',
       id:'events'
    }

});

And the list is set to use the offline store:

items: [{
        xtype: 'list',
        store: App.offlineeventstore,
        itemTpl: '{title}',
        grouped: true,
        indexBar: true,

Answer 1

Add this to the Event model:

 proxy: {
       type: 'localstorage',
       id:'events'
    }

And then for each event that you download call save() like this:

 App.eventstore.each(function(record){record.save();});

Then to load:

 App.offlinestore = new Ext.data.Store({
     model: 'Event',
    sorters: 'title',
    autoLoad: true,

   getGroupString : function(record) {
    return record.get('title')[0];
   },
   proxy: {
       type: 'localstorage',
      id:'events'
}});

Update

App.eventstore.load(function(){
   App.eventstore.each(function(record){record.save();});
   offlineeventstore.load();
});