Results 1 to 10 of 10

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

    Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    7

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

    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):

    Code:
    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.

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    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

  3. #3
    Sencha User
    Join Date
    Apr 2011
    Posts
    7

    Default

    Ok, I will do the test case there

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Posts
    7

    Default fiddle test

    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).

  5. #5
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

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

  6. #6
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    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.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  7. #7
    Sencha User
    Join Date
    Apr 2011
    Posts
    7

    Default

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

  8. #8
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    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:

    Code:
    Ext.define('Foo', {
        extend: 'Ext.data.Model'
    });
    // No sync, provided an id
    store.add({id: 1});
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  9. #9
    Sencha User
    Join Date
    Apr 2011
    Posts
    7

    Default

    Hm, I understand. Let me try and see

  10. #10

    Default how to add a newly created model to the store?

    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •