ExtJs - Unable to save a store to localStorage

Question

I have a store with a localstorage proxy, but I'm unable to save the data. The code is quite simple:

onToolbarTicketsadd: function(me){
    var tickets = this.getStore('Tickets');
    tickets.add({id: 1, name: 'new'})
    console.log(tickets.getById(1), tickets.count())
    tickets.sync({callback: function(){console.log('synched')}})
},

The ticket gets added to the store, as the first console.log proves, but the sync() command does not work. The localStorage inspector only shows an empty entry Tickets: '', and the callback function also does not get called.

What am I missing ? What is necessary for a localstorage proxy to work ?

Note: The problem is not with the browser: I'm on the latest Chrome and Firefox.

Here is the code for the store and the model:

Ext.define('App.store.Tickets', {
    extend: 'Ext.data.Store',
    model: 'App.model.Ticket',
    proxy: {
        type: 'localstorage',
        id: 'Tickets'
    }
});

Ext.define('App.model.Ticket', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int'},
        {name: 'name', type: 'string'}
    ]
});

A demo of the problem is here.

Answer 1

If you want to keep the id exclusively for your own field name, then manually setting the idProperty on the model to something else seems to resolve the issue - see this working demo. Take note though, that if it's required you will have to enforce your own uniqueness on the attribute.

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    idProperty: '_id',  // <-- here 
    fields: [
        {name: 'id', type: 'int'},
        {name: 'name', type: 'string'}
    ]
});

Answer 2

This took me much time to find. The problem is due to the way Extjs determines when a record needs to be synched: the phantom property.

To add a new record to a store, you must not give the id. This will not work (since the id is set, the record will not be marked as phantom, and it will not get synched) :

store.add({id: 1, name: 'new'})
store.sync()

This will work:

store.add({name: 'new'})
store.sync()

There is also a possible workaround, by setting the phantom property after adding the records. This can be necessary when the id has some meaning and is more than just an autoincremented value :

Ext.Array.each(store.add({id: 1, name: 'new'}), function(record){
    record.phantom = true
});
store.sync()

An allusion to the problem is made at Extjs.data.Model.phantom: Any record which has a real database pk set as its id property is NOT a phantom -- it's real.
It's clear that this statement is not necessarily true, like above in the first code snippet, but since Extjs 4.2 assumes it to be true always, the bug appears.

I hope that this explanation will save somebody some hours of work. It would have saved me a day.