ExtJS Store Destroy event commit

Question

I have an issue when I want to delete multiple items from a store without having to refresh my page. The first time I delete an event, all is well as you can see from this Fiddle snippet:

551   200   HTTP   localhost:52543   /api/Appointments/Destroy?_dc=1442940419083   140   no-cache; Expires: -1   application/json; charset=utf-8   chrome:157528         

Data:

{ "Id":1749644,"StartDate":"2015-09-22T01:00:00+02:00","EndDate":"2015-09-22T03:00:00+02:00","ResourceId":9,"PreviousResourceId":0,"Name":"","Cls":""}

However, if I want to remove additional items subsequently (without refreshing the page), it is as though the event store does not accept or understand that the previously removed record is already processed:

[
 { Id":1749644,"StartDate":"2015-09-22T01:00:00+02:00","EndDate":"2015-09-22T03:00:00+02:00","ResourceId":9,"PreviousResourceId":0,"Name":"","Cls":""},
 {"Id":1749656,"StartDate":"2015-09-22T10:45:00+02:00","EndDate":"2015-09-23T16:00:00+02:00","ResourceId":20,"PreviousResourceId":0,"Name":"test","Cls":""}
]

If you look closely, you'll see the same event appears too in the second call whereas this shouldn't! Apart from this, everything goes perfectly: the Web API is called after every 1 destroy call (thus first time after every page request). After the first call, the Web API is still called but the binding is now corrupted due to unexpected input: it receives a collection whereas it expects only 1 item.

Here is the tore:

Ext.define('SchedulerApp.store.EventStore', {
extend: "Sch.data.EventStore",
autosync: true,
batch: false,
proxy: {
    type: 'ajax',
    api: {
        create: '/api/Appointments/Add',
        update: '/api/Appointments/Update',
        destroy: '/api/Appointments/Destroy'
    },
    reader: {
        type: 'json'
    },
    writer: {
        type: 'json',
        writeAllFields: true
    }
},
listeners: {
    load: {
        fn: function (store, records, successfull) {
        }
    },
    create: {
        fn: function (store, records, successfull) {

        }
    },
    add: {
        fn: function (store, records, successfull) {
            //store.sync();
        }
    },
    update: {
        fn: function (store, records, successfull) {
            var previousResource = records.previous.ResourceId;
            records.data.PreviousResourceId = previousResource;
            records.store.sync();
        }
    },
    destroy: {
        fn: function (store, records, successfull) {
        }
    },
    remove: {
        fn: function (store, records, successfull) {
            store.sync();
        }
    }       
}

});

I need to figure out how to 'accept' an updated/inserted/removed record. This is a fairly standalone issue, so every other code than posted here will be useless information.

Answer 1

Turns out I indeed missed the store's commitment function. In the callback's success method, I added the commit and the issue disappeared!