ExtJS store add calls both create and destroy

Question

                this.store = Ext.create('Ext.data.Store', {
                fields: [
                    'id',
                    'name',
                    'Address',
                    'status',
                ],
                autoLoad: auto,
                autoSync: auto,
                remoteSort: true,
                proxy: {
                    type: 'ajax',
                    api: {
                        create: '../../create.php',
                        read: '../../read.php',
                        destroy: '../../destroy.php',
                        update: '../../update.php'
                    },
                    reader: {
                        type: 'json',
                        root: '__data',
                        totalProperty: 'grandTotal'
                    },
                    writer: {
                        type: 'json',
                        root: '__data'
                    },
                    listeners: {
                        exception: function( t, response, op ) {
                            var _da = Ext.decode( response.responseText );
                            if( _da ) {
                                if( _da.message == "ExistingName" ) {
                                    _da.message = Locale.gettext('name already exists');
                                    } else {
                                        frm = _self.subnetEditor.down('form');
                                        name_field = frm.down('textfield[name=name]');
                                    }
                                    name_field.markInvalid(Locale.gettext(_da.message));
                                }
                                showMsg( _da.success, _da.message );
                                if( op.action == 'create' || op.action == 'update' ) {
                                    _self.store.rejectChanges();
                                    _self.store.load();
                                }
                            }
                        }
                    }
                }
            });

This is the store that calls four php files to do the CRUD, and some listener to process the duplicate name.

        removeSelected: function() {
        var _self = this;
        Ext.Msg.show( {
            title: Locale.gettext( 'Remove selected?' ),
            msg: Locale.gettext( 'Are you sure you want to remove ALL SELECTED items?' ),
            icon: Ext.Msg.WARNING,
            buttons: Ext.Msg.OKCANCEL,
            buttonAlign: 'right',
            fn: function( button ) {
                if( button == 'ok' ) {
                    var grid = _self.down( 'grid' );
                    if( grid ) {
                        var selection = grid.getSelectionModel().getSelection();
                        if( selection.length ) {
                            _self.store.remove( selection );
                            if( _self.useGridRowEditing ) {
                                _self.store.sync();
                            }
                        }
                    }
                }
            }
        } );
    }

Here is the remove function will remove the selected items, and I have store.add(item) to add records. But the problem is if I run the remove function, and then store.add to add any items, the store.add will fire create and destroy together. The second destroy will post exact data as the first time when I run the remove function. I suppose that the store.add will only call the create api in the proxy, but why destroy has been called?

I see the remove throws an exception. If an exception has been thrown, is that mean the remove action is still pending? So it batch the add and remove together?

Answer 1

This is not caused by the ExtJS, it causes the server respond "[null]". The array of null is considered as an exception, I guess the exception causes the request becomes pending.