Extjs - Remove newly added selected item from store

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             }

Answer 1

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?

Answer 2

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
})