Question

I have a GridPanel that is backed by a DataStore (ExtJS 4). OK, so when the user selects a row and clicks a delete button, I send a POST request to the server with the ID of the selected record, delete the record, and then on return, re-load the data store.

The record is deleted successfully, the server returns a status code of OK. But, if the user selects THE LAST ROW of the GridPanel, I get the following error:

Uncaught TypeError: Cannot read property ‘id’ of undefined

I have no other events on the Grid Panel or DataStore.

Here is my delete code:

function deleteTEDetailExceptions() {
   try {

      if(tedetailExceptionsEditorGrid.getSelectionModel().selected.length < 1) {
         statusMessage("Please select an exception first", true);
         return;
      }

      var record = tedetailExceptionsEditorGrid.getSelectionModel().selected.items[0];
      currentTEDetailExceptionKey = record.data["tedetailExceptionKey"];

      // send the delete request
      Ext.Ajax.request({
         url: '/timesheets/action.do',
         method: 'POST',
         params:{
            tedetailExceptionKey : currentTEDetailExceptionKey,
            type                 : "tedetailExceptions",
            "delete"             : "true"
         },
         success: function(response) {
            if(response.statusText == "OK") {
               tedetailExceptionsEditorGrid.getSelectionModel().clearSelections();
               TEDetailExceptionsStore.remove(record);

               // reload the store
               Ext.Function.defer((function(){

                  TEDetailExceptionsStore.load({
                     params:{
                        timeEntryDetailKey : timeEntryDetailKey,
                        type               : "tedetailExceptions"
                     }
                  });
               }),250);
            }
         }
      });

   }
   catch(e) {
      console.log(e);
   }
}

What am I doing wrong?

EDIT

I managed to solve the problem with the following code. It was pretty stupid of me to reload the data store when I didn’t need to!!

function deleteTEDetailExceptions() {
   try {

      if(tedetailExceptionsEditorGrid.getSelectionModel().selected.length < 1) {
         statusMessage("Please select an exception first", true);
         return;
      }

      var record = tedetailExceptionsEditorGrid.getSelectionModel().selected.items[0];
      tedetailExceptionsEditorGrid.getView().refresh();

      currentTEDetailExceptionKey = record.data["tedetailExceptionKey"];

      // send the delete request
      Ext.Ajax.request({
         url: '/timesheets/action.do',
         method: 'POST',
         params:{
            tedetailExceptionKey : currentTEDetailExceptionKey,
            type                 : "tedetailExceptions",
            "delete"             : "true"
         },
         success: function(response) {
            if(response.statusText == "OK") {
               TEDetailExceptionsStore.remove(record);
            }
         }
      });

   }
   catch(e) {
//      console.log(e);
   }
}

Answer 1

I’m not sure why you’re reloading the data after you’ve deleted a record. Are you using a paging toolbar as well?

ExtJs obviously thinks that there is a record in the last row and seeing as you’re reloading all the data anyways have you tried calling TEDetailExceptionsStore.removeAll() before you reload the data store.

Another possibility might be to refresh the grid view after you remove the record from the store. You can do this with grid.getView().refresh() This might force ExtJS into recognizing that the last row does not contain a record