Search code examples
javascripteventsextjsstoreextjs3

ExtJS 3.3 Store: save event receiving incomplete data


We're still using ExtJS 3.3 in this project because it's an older project and (unfortunately) we don't have time to upgrade at the moment.

I have an editor grid panel with a restful JSON store. The JSON store has autoSave set to false, because I need to perform a potentially long running task on the server when something has changed. So I decided to create a "Save" button so the store is only saved once the user has completed the modifications. As the store is sending multiple requests to the server, I'm listening to the save event of the store to fire another request starting the long running operation after all data has been saved.

And here comes the problem: According to the documentation the third parameter of the event handler is the data that has been saved, grouped by the store operation (create, update or destroy), like this:

{
    create: [ /* created records here */ ],
    update: [ /* updated records here */ ],
    destroy: [ /* deleted records here */ ]
}

My problem is that I'm receiving only the "created" records. For the other operations, the array is always empty when there should be some records. If there were no records using "update" or "destroy", the data object doesn't contain the "update" or "destroy" key (which is correct).

Let's say there were one updated, two created and no deleted records in the last save operation, the data I receive would look like this:

{
    create: [
        { /* record 1 data here */ },
        { /* record 2 data here */ }
    ],
    update: [] // <-- should not be empty!
}

I don't know why update and destroy are always empty. Can anyone help me?

Or maybe you have another suggestion how I can solve the original problem, performing an "after-save" task using the IDs of all created/updated/deleted records.


Solution

  • I managed to work around this issue.

    Apparently the beforesave event receives the correct parameters. I'm now storing the dirty records in a temporary property in the store before saving them and read the property afterwards in the save event.

    listeners: {
        beforesave: function (store, data) {
            // in my concrete case it's okay to join all records
            var all = (data.create || []).concat(data.update || []).concat(data.destroy || []);
            store.tempData = all;
        },
    
        save: function (store) {
            // do something with store.tempData
        }
    }
    

    As the records in tempData are references, it doesn't matter that they may be phantom records (without server-generated ID) when beforesave is called. When save is called, these records have already been replaced with "real" records.