A Sencha ExtJS EditorGridPanel automatically visually marks a cell as dirty when a user modifies the value, but that’s it. If you want to know if a row is dirty and take an action based upon that knowledge, you’re on your own.

Since I needed this functionality, I took a stab at it today, and here’s my simplistic example of how to do it.

First, I create a global variable named editedRow which will get updated when the afteredit event is fired on the GridPanel.

var editedRow;

var AutoGrid = new Ext.grid.EditorGridPanel({
    // Properties clipped for article;
    // view example for full code
});

// After any field is edited, make the row dirty
AutoGrid.on('afteredit', function(){
    if (!editedRow){
        editedRow = AutoGrid.getSelectionModel().getSelections();
    }
}, this);

Now that I’ve stored which row is dirty, every time the user clicks on another cell, I check a) there is a dirty row, and b) if the active row is the dirty row.

// Any time the user mouse downs on a cell,
// check to see if there are any dirty rows
AutoGrid.on('cellmousedown', checkForChanges, this);

function checkForChanges(){
    if (!editedRow){
        return true;      // No dirty rows
    } else {
        var selectedRow = AutoGrid.getSelectionModel().getSelections();
        var selectedRecord = selectedRow[0].data;
        var editedRecord;

        editedRecord = editedRow[0].data;

        if (selectedRecord.model != editedRecord.model){
            // Alert the user to save changes
            // See example for full code
        }
    }
}

Then if there is a dirty row, I can prompt the user and ask it to save its changes before editing another row.

View Dirty Row Example