Can you help me to do this? - extjs4.0.2a problem

Following I have given you the source code. There I am doing my update to the database by simply double click on the row and then when I am going to delete a record it will return a message as there have a data violation. up to this level the program is working in well manner.

But the problem is after that delete , if I go to update any record, the proxy executes update and then destroy(delete) again.

For your further ref -

when I remove some records from this store without page refreshing, it seems that all previous deleted items are stored somewhere and sended to servlet on every new update. When I refresh page, first update is ok, but any next update again after removing a record accumulate previous removed records. What I do wrong and how I can fix it?


====CODE====
============

/*

Ext JS 4.0.2a
*/

Ext.require(['Ext.data.*', 'Ext.grid.*', 'Ext.dd.*']);

Ext.define('StakeholderType', {
extend: 'Ext.data.Model',
fields: [{
name: 'stakeholderTypeId',
type: 'int',
useNull: false
}, 'code', 'description', 'sector']
});

Ext.data.proxy.Rest.override({
actionMethods : {
create : 'POST',
read : 'GET',
update : 'POST',
destroy: 'POST'
}
});

Ext.onReady(function(){

var jsonReader = Ext.create('Ext.data.reader.Json',{
root: 'data',
totalProperty: 'total',
successProperty: 'success',
idProperty: 'stakeholderTypeId',
messageProperty: 'message'
});

var jsonWriter = Ext.create('Ext.data.writer.Json',{
root: 'data',
encode: true,
writeAllFields: true
});

var proxy = Ext.create('Ext.data.proxy.Rest',{
api: {
read : 'stakeholderTypeView.htm',
update : 'stakeholderTypeEdit.htm',
destroy : 'stakeholderTypeDelete.htm'
},
reader : jsonReader,
writer : jsonWriter,
idProperty: 'stakeholderTypeId',
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'ERROR',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}

});

var store = Ext.create('Ext.data.Store', {
autoLoad : true,
autoSync : true,
model : 'StakeholderType',
proxy : proxy
});

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing',{
clicksToEdit: 2
});

var grid = Ext.create('Ext.grid.Panel', {
plugins: [rowEditing],
width: 325,
height: 250,
frame: true,
title: 'Stakeholder Types',
store: store,
iconCls: 'item-agent',
columns: [{
header: document.getElementById("code").value,
width: 70,
sortable: false,
dataIndex: 'code'
}, {
header:document.getElementById("description").value,
width: 145,
sortable: true,
dataIndex: 'description',
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: document.getElementById("sector").value,
width: 85,
sortable: false,
dataIndex: 'sector',
field: {
xtype: 'textfield'
}
}],
listeners: {
selectionchange: function(model, records) {

if (records[0]) {
this.up('form').getForm().loadRecord(records[0]);
}

}
},
dockedItems: [{
xtype: 'toolbar',
items: [{
text: document.getElementById("edit").value ,
iconCls: 'icon-user-add',
handler: function(){

var editS = grid.getView().getSelectionModel().getSelection()[0];
rowEditing.startEdit(editS,0);
}
}, '-', {
itemId: 'delete',
text : document.getElementById("remove").value,
iconCls: 'icon-user-delete',
disabled: false,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if(selection){
var con = confirm('Are you sure?');
if (con == true) {
grid.store.remove(selection);
grid.store.load({
scope : this,
callback: function(records, operation, success) {
//the operation object contains all of the details of the load operation
console.log(records);
}
});
}
}
}
}]
}]
});


var fieldSet = Ext.create('Ext.form.FieldSet',{
columnWidth: 1,
margin: '0 0 0 10',
title:'StakeholderType details',
width: 300,
labelWidth: 90,
defaultType: 'textfield',
items: [{
fieldLabel: 'Code',
width: 200,
disabled:true,
name: 'code'
},{
fieldLabel: 'Description',
disabled:true,
width: 250,
name: 'description'
},{
fieldLabel: 'Industrial Sector',
disabled:true,
width: 200,
name: 'sector'
}]
});

var panel = Ext.create('Ext.form.Panel', {
id: 'stakeholder-form',
frame: true,
title: 'Mapping Stakeholder',
bodyPadding: 5,
width: 650,
layout: 'column', // Specifies that the items will now be arranged in columns

fieldDefaults: {
labelAlign: 'left',
msgTarget: 'side'
},

items: [
grid,
fieldSet
],
renderTo: 'grid_to_form'
});

});