Extjs - Remove newly added selected item from store
-
06-07-2019 - |
Question
I have to remove a selected item in an editorgrid. First the store is loaded and the user can choose to add or delete blank rows to this grid which they can then edit. The problem is not with removing initial records loaded from the store. The problem comes in when I add an additional row, edit it and then choose to remove it (user may decide he doesn't need this row after all).
It seems that when I would like to save changes using store.getModifiedRecords, it still sees the row that was deleted and so processes it as well. Here is the button remove:
442
443 text:'Remove',
444 tooltip:'Remove attribute',
445 iconCls:'silk-table_delete',
446 handler: function() {
447 var selectedItem = attributeEditor.getSelectionModel().getSelected();
448
449 // Check if we have selected item
450 if (selectedItem) {
451 // Get selected item value
452 var attribute = selectedItem.get('Name');
453
454 // Remove selected
455 attributeStore.remove(selectedItem);
456
457 // Add to our removed attributes hash
458 if (id) {
459 RemovedAttributes.push(attribute);
460 }
461 } else {
462 wispUserFormWindow.getEl().mask();
463
464 // Display error
465 Ext.Msg.show({
466 title: "Nothing selected",
467 msg: "No attribute selected",
468 icon: Ext.MessageBox.ERROR,
469 buttons: Ext.Msg.CANCEL,
470 modal: false,
471 fn: function() {
472 wispUserFormWindow.getEl().unmask();
473 }
474 });
475 }
476 }
477 }
Solution
This is how the store.getModifiedRecords() works. The modified records records are stored in a array called modified in store object. When you remove an item from the store it is not removed by default.
Here is the actual remove() from store
remove : function(record){
var index = this.data.indexOf(record);
this.data.removeAt(index);
if(this.pruneModifiedRecords){
this.modified.remove(record);
}
if(this.snapshot){
this.snapshot.remove(record);
}
this.fireEvent("remove", this, record, index);
}
This means that the item is removed from the modified list only if you specify the pruneModifiedRecords option value as true. This value is false by default as mentioned in the Store API.
If you want the newly added item to be removed from the modified list you have to set the value of pruneModifiedRecords as true when creating the store Ex:
var stote = new Ext.data.SimpleStore({
fields: [],
data: [],
pruneModifiedRecords: true
})
OTHER TIPS
store.load();
//remove function will delete specific record.
store.remove(store.findRecord("item_id","1"));
store.sync();
i think the following link can help you with easy way how to handle store
Off the top of my head, I can't see why your code would be working that way, as it appears to be correct. Have you used Firebug to set a breakpoint and step through the process?