Change ExtJs EditorGridPanel row color after edit

By adding an afteredit listener to your editor grid you’ll be able to change the row color on the fly, right after
the cell has been changed so users will be able to tell which records have been changed. I’ve added this instead of the little red tickbox since it is easier for the user to see and it just looks better.
Just in case this would conflict with the little red icon, I also went ahead and removed it with my custom.css file (shown below).

Here’s the code portion for the grid:

new Ext.grid.EditorGridPanel({
    id:'unitgrid_id',
    store: storename, 
    view: viewname,
    cm: colmodelname,
    selModel: selmodelname,
    stripeRows: true,
    width:760,
    height:255,
    autoSizeColumns: true,
    collapsible: false,
    animCollapse: false,
    forceFit: true,
    clicksToEdit: 2,
    listeners : { 
    		
     		afteredit : function(object) { // This applies the css to the row after it has been edited
     						row = object.row; // Find out the row number
     						unitGrid = Ext.getCmp('unitgrid_id'); // Get the grid id
     						rowview = unitGrid.getView().getRow(row); // Now set the view to be changed
     						changecss = Ext.get(rowview); // Store the view in a var
     						changecss.addClass('change-row'); // apply the css, it must exist somewhere, I have it  in a separate custom.css file which I include when  initially loading the app
     						}
    		}
				});

And here’s the custom.css file with the mentioned code above:

.x-grid3-dirty-cell {
     background-image:none;
}


.change-row {background-color: #ffffa8;
			border-color:#FA1505;}	

Hopefully this has helped you, and as always thank you for stopping by and please share with others, after all, code should be free.