Store insert/add to not fire "add" event if idProperty is set in the model in ExtJS5

[delian]

autoSync property of a store set to true is quite useful and popular feature. It automates CRUD operations trough your proxy, so if you add/insert/set/delete records to a store you don't have to write you own code for the REST operations.

However, I found a bug with the latest ExtJS 5.0.1 -

If you create a data model and you have idProperty set within, then Create and Delete do not work anymore. While Update and Read are still operational as before.

This is quite a serious problem. If you use the very popularo MongoDB as a backend, you most probably use '_id' as ID property name instead of the default 'id'.

I use the following code to test the problem (check the comments in the code, written in red):


Ext.define('MyModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.field.Field'
],
idProperty: 'username', // If this line is removed, everything works fine
fields: [
{ name: 'username' },
{ name: 'xxx' }
]
});

Ext.define('MyStore', {
extend: 'Ext.data.Store',
requires: [
'MyModel',
'Ext.data.proxy.Rest'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'MyStore',
autoLoad: true,
autoSync: true,
model: 'MyModel',
proxy: {
type: 'rest',
url: '/rest/service',
reader: {
type: 'json',
rootProperty: 'rows'
}
}
}, cfg)]);
}
});

s = Ext.create('MyStore');
s.insert(0,{ username: 'xxxx' }); // This is supposed to fire add event and to do REST POST operation. Doesn't work if idProperty is set! Works if idProperty is removed
s.getAt(0).set('username','yyyy'); // This is supposed to do REST PUT, works with or without idProperty set
s.remove(s.getAt(0)); // This is supposed to do REST DELETE, Doesn't work if idProperty is set! Works if idProperty is removed!



If idProperty is set in the Model, then insert and remove does not fire autoSync events for add and remove. Update still works fine. This is quite confusing and do not allow a lot of programs developped with earlier versions of ExtJS and MongoDB (not only them) to be migrated to ExtJS 5.

[Gary Schlosberg]

Thanks for the report. I haven't been able to recreate this one. Can you please post a test case which reproduces the issue?
https://fiddle.sencha.com/#home

[delian]

Ok, I will do the test case there

[delian]

Hi, you can access the demo at https://fiddle.sencha.com/fiddle/bnh
Unfortunately, the bug happens every time, like a charm :)

I am testing it the following way -
Open Chrome Browser, go to https://fiddle.sencha.com/fiddle/bnh then open Chrome Inspect (F12), go to Console mode and set (second mouse button) Log XMLHttpRequests.

Then run the fiddle demo.

If it works, it is suppose for you to see the following 3 requests to the backend:
POST (for the insert)
PUT (for the set)
DELETE (for the remove)

However, you will see only PUT and DELETE. If there is no set, you will not see DELETE as well.
That mean that Store insert/add does not trigger the add event (it is actually mentioned in the Sencha Documentation).

The example code I use is actually generated by Sencha Architect 3.1. I just simplified it (and put it in a single file).

[Gary Schlosberg]

Thanks for the test case. I have opened a bug in our bug tracker.

[evant]

This isn't a bug. The reason you don't get an add is because the record is given an explicit id, which makes it not a phantom record, so it doesn't need to send an add request.

[delian]

So you are saying, autosync is not supposed to work with idProperty different than id?

[evant]

The idProperty isn't relevant. The issue is that you are giving the record an id, which means it's not a phantom. You would have the same issue if you had:



Ext.define('Foo', {
extend: 'Ext.data.Model'
});
// No sync, provided an id
store.add({id: 1});

[delian]

Hm, I understand. Let me try and see

[rolf.mueller]

We have exactly the same problem as described above,
but I am not clear about the resolution of this.
Once you create the model, how are you suppose to add the instance to the store?
We tried

store.insert(1,model);

store.add(model);

store.setData(model);

but none of the above works.