Fire “afteredit” after edit the entire row in ExtJ

Question

I have an ExtJS editor grid which has some columns inside. I want to modify data on a record and auto save data to DB. But I just need save data after I complete editing all cells at the current row. I've used the event "afteredit" but it fired the event right after one cell was changed. How can I keep that event not to fire until I've completed modifying all cells? Or could you please suggest another way to do this, not use the "afteredit" event? Thank you so much.

Answer 1

When edit event has been fired, you should check modified config to check whether all of grid columns have been modified or not. After modifying, you can send them to your back end.

Answer 2

Here is my question back: Do you edit all the cells in a row? A better solution would be to use a "save" button to send the updated data back to the server and save it into DB.

Now, if you insist that all cells at a row will be modified, you can do the following:

In afteredit event handler:

1. Get the record being edited (you can get it by event.record)
2. Check if all the fields have been modified in the record. This can be done by inspecting the public property modified.
3. If all the fields are modified, proceed with sending the updated record to server for saving into DB.

Answer 3

I think in your case it would be easier to have a button that you click to save the grid. you could access all the modified records by calling grid.store.getModifiedRecords() and send that to your backend service and do a mass update instead of updating a single row at a time.

Answer 4

You could use the rowdeselect event on the selection model (assuming that you use a Ext.grid.RowSelectionModel. Inside the event handler you can check if the record has been modified and react accordingly.

var grid = // your grid 
grid.getSelectionModel().on("rowdeselect", function(selModel, rowIndex, record) {
    if (record.dirty) {
        // record has been modified
    }
});

Answer 5

You might take a look at Ext.ux.grid.RowEditor. It has an afteredit event that fires when the row is done being edited.

You can find the working example at http://dev.sencha.com/deploy/dev/examples/grid/row-editor.html