Question

My Setup

• Safari 5.1.2 (Macintosh)
• Sencha Touch 1.1

The Issue

The process

I have a model and a store. I update a record using the set(field,value) method documented here: API – Set. After updating fields, I use save() method documented here: API – Save.

The Result

The record updates in any lists that are bound to the store and appears to be saved, however when I reload the webpage the old values are displayed. So the record is updated, the store see’s the new data, the lists bound to the store refresh their display, but the actual representation of the data in localstorage is never updated. If you use the browser console to find and inspect the item with something like var record = summaryStore.getAt(4), you will find that the dirty attribute is false even if the save() call has not been made. Also summaryStore.getUpdatedRecords() returns an empty set regardless of whether the save() method has been called.

Further documentation

API – Models

API – Stores

API – Proxies

The Code

Store

var summaryStore = new Ext.data.Store({
model: 'EventSummary',
storeId: 'summaryStore',
sortOnLoad: true,
sorters: [
    {
        property: 'date',
        direction: 'DESC'
    }
],
proxy: {
    type: 'localstorage',
    id  : 'summary-cache'
}
})

Model

Ext.regModel('EventSummary', {
fields: [
    {name: 'child', type: 'string'},
    {name: 'date', type: 'date'},
    {name: 'description', type: 'string'},
    {name: 'event_id', type: 'int'}
],
proxy: summaryStore.proxy
})

Example

var record = summaryStore.findExact('event_id', 90)
record.date = new Date();
record.description = 'Vitamin K Shot`
record.save()

Both before and after the record.save(), the dirty flag is false. summaryStore.getUpdatedRecords() returns an empty set both before and after the save. All lists to summary store reflect the change made regardless of whether the record is saved.

Additional Notes

The store is populated with this call, which follows the declaration of the store and the model. summaryStore.load()

Answer 1

Update

The issue can be avoided altogether by properly instantiating your model instances before passing them to the store’s add method. I was just passing in JSON, which the store accepted, but apparently was causing issues.

End Update

The issue can be fixed by making changes in WebStorageProxy.js

Be advised that changing this file does not modify your sencha-touch.js file. You will have to rebuild it or modify it directly

This code was not working

setRecord: function(record, id) {
    if (id) {
        record.setId(id);
    } else {
        id = record.getId();
    }

This line in particular id = record.getId(); for some reason was coming up undefined on objects that had already been added to the store. The solution is to add

if (id === undefined) {
    id = record.internalId;
}

The final code looks like

setRecord: function(record, id) {
    if (id) {
        record.setId(id);
    } else {
        id = record.getId();
        if (id === undefined) {
            id = record.internalId;
        }
    }