Multiple rows delete - json problem

[K4T]

Hello! I have little problem with deleting multiple rows from grid panel with checkbox selection model and paging toolbar. Here is code for delete button:

 
            {
                text: 'Delete',
                iconCls: 'delete-icon',
                handler: function(){
                    var store = Ext.getStore('ToDos'),
                        pagingTB = Ext.getCmp('toDoPagingTB'),
                        list = Ext.getCmp('toDoList'),
                        selections = list.getSelectionModel().getSelection();


                    if (selections) {
                        Ext.MessageBox.confirm('Confirm', 'Are you sure?', function(btn) {
                            if (btn == 'yes'){
                                for(var i in selections)
                                {
                                    store.remove(selections[i]);
                                    store.totalCount--;
                                }
                                pagingTB.updateInfo();
                            }
                        });
                    }
                }
            }

Here is server side code in PHP to retrieve json request and delete sent rows:

public function actionDelete()    
{        
      if(Yii::app()->request->isAjaxRequest) {
                 $data = $this->getRequestPayloadData();
                 $respond['success'] = (ToDo::model()->deleteByPk($data['id'])) ? true : false;
                 echo json_encode($respond);       
      }   
} 

Everything is ok when I want to delete one row. But problem appears when I want to delete more than one row. For example: I want to delete 2 rows so I'm checking two rows... pressing delete button and... only one row is deleted! 2 delete requests were sent with this JSON data:

First request:
{"id":"18","toDo":"Buy sweets","dueDate":"2012-04-25","createdAt":"2012-04-07"}
Response: {"success":true}

So we deleted first checked row... now second request for second row:

Second request:
[{"id":"18","toDo":"Buy sweets","dueDate":"2012-04-25","createdAt":"2012-04-07"},{"id":"17","toDo":"Play Battlefield","dueDate":"2012-04-18","createdAt":"2012-04-07"}]

Response: full of php errors - I know why but I dont know why second request contains deleted row from previous request. Could somebody explain me it? Is it possible to send only one request with all checked rows? Why deleted row is added to next request? Greetings.

Here is code for store:

Ext.define('ToDo.store.ToDos', {
    extend: 'Ext.data.Store',


    model: 'ToDo.model.ToDo',
    autoSync: true,
    pageSize: 25,
    autoLoad: {start: 0, limit: this.pageSize},


    proxy: {
        type: 'ajax',
        api: {
            read: 'todo/read',
            update: 'todo/update',
            destroy: 'todo/delete',
            create: 'todo/create'
        },
        reader: {
            type: 'json',
            root: 'todos',
            totalProperty: 'total',
            successProperty: 'success'
        },
        writer: {
            type: 'json',
            writeAllFields: true,
            successProperty: 'success'
        },
        listeners: {
            exception: function(proxy, response, operation){
                Ext.MessageBox.show({
                    title: 'REMOTE EXCEPTION',
                    msg: 'Error: ' + response.status + '<br />Message: ' + response.statusText,
                    icon: Ext.MessageBox.ERROR,
                    buttons: Ext.Msg.OK
                });
            }
        }
    }
});

[vietits]

It's due to removing actions happen too quickly while responses from server are slow. Suppose you have two records to remove as in your example. With store configured with autoSync set to true and the loop:

for(var i in selections){
	store.remove(selections[i]);
	store.totalCount--;
}

In the first loop, the first selected record marked to remove and with autoSync: true, your store generates removing request to server. This time there is only one record to remove. It also has to wait for response from server to complete the removing action.
However, because the loop runs very fast, the second loop happens before the first server response comes back, so in the second loop, two records will be marked to remove and your store will generate a removing request with these two records. And so on.
To avoid this, you can set autoSync to false and call <store>.sync() after removing all selected records or call <store>.remove() with an array of records to remove.

store.remove(selection);

[tobiu]

store.remove() accepts an array of records as the argument. so there is no need for the for loop at all.

[K4T]

Thank you, guys!

[marri]

Hi,
I am also running into the same issue below is the code what i trying with

var records = sm.getSelection();
var grid = Ext.getCmp('grid');
grid.store.remove(records);
grid.store.syn();

with the above code initially it is deleting the records but when i refresh the page it is showing the deleted records.
In my store autoSync: true i cant change it to false there because some other functionalities are running on that. please suggest me how to over come this issue.

Thanks in advance
Marri