Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cancel store.remove after server call in ExtJS 4

Tags:

extjs

I'm using ExtJS 4 and have an Ext.data.Store with an ajax proxy and api:

var gridStore = Ext.create('Ext.data.Store', {
    autoSync: true,
    proxy: {
        type: 'ajax',
        api: {
            read: 'myurl',
            create: 'myurl',
            update: 'myurl',
            destroy: 'myurl'
        },
        reader: {
             type: 'json',
             successProperty: 'success',
             root: 'data',
             messageProperty: 'message'
        },
        writer: {
             type: 'json',
             writeAllFields: false,
             root: 'data'
        },
        listeners: {
             exception: function(proxy, response, operation){
                 Ext.MessageBox.show({
                     title: 'Server error',
                     msg: operation.getError(),
                     icon: Ext.MessageBox.ERROR,
                     buttons: Ext.Msg.OK
                 });
             }
        }
    ...

When I use the update function and my server returns a json object with success:false (because he entered something wrong) the field in my associated grid is still marked as changed and the user has the option to change his wrong value.

That works fine.

But when I remove a record from the store...

var store = Ext.StoreManager.lookup('gridStore');
store.remove(store.getById(id));

...then ExtJS removes this record from the store first and call the ajax api afterwards. So when the destroy api returns success:false the message is shown as exception like in the update api, thats fine, but my record has been removed from the store! As example the exception from the server says that you cannot remove this record because of whatever but it's already removed in the store.

How to cancel the store removement after the server sync? I want the record to stay in the store if the server returns success:false.

Any idea? Maybe a bug?


UPDATE SOLUTION

Based on Ryan's anwer, I modified the exception listener as following, which works very well:

 listeners: {
     exception: function(proxy, response, operation){
         Ext.MessageBox.show(...);
         // get the removed records and insert them where they have been
         var removedRecords = gridStore.getRemovedRecords();
         for(var i=0; i<removedRecords.length; i++){
             var record = removedRecords[i];
             gridStore.insert(record.index, record);
         }
     }
 }
like image 275
Marc Avatar asked Oct 24 '11 02:10

Marc


1 Answers

The insert technique didn't work for me, the removed record stays marked for removal on the next sync operation. I am using Ext.data.Store.rejectChanges() for this purpose.

like image 180
user1590719 Avatar answered Sep 16 '22 15:09

user1590719