ExtJS 4.1 : How to combine local data with ajax loaded data in a single store?

Question

I'm looking for a way to combine local data with ajax loaded data in a single store. It's difficult for me to explain this in english, I hope this piece of code will be more explicit :

var store = Ext.create('Ext.data.Store', {
    autoLoad: true,
    fields: ['id', 'name'],
    proxy: { type: 'ajax', api: { read: '/read' }  },
    data: [{ id: 1, name: 'John' }]
});

Json returned by "/read" : [{ id: 2, name: 'Jack' }].

Desired behaviour : store.count() // 2

Answer 1

You can use .load({addRecords: true} to add loaded records to existing records.

Of course if you load again with the addRecords: true option enabled it will add the records to the existing records again resulting in:

[{ id: 1, name: 'John' },{ id: 2, name: 'Jack' },{ id: 2, name: 'Jack' }]

You could implement a before load handler to reset the store to the original data and load again if you want only [{ id: 1, name: 'John' },{ id: 2, name: 'Jack' }] every time you load again.