How to validate Extjs Editable Grid Cell

Question

I have an editable grid and for a particular column / field I have to implement validation. For example lets say I have a grid with 2 columns. Want to validate the symbol once enter a symbol and its quantity.

For validation there will be a service call and the response will have an indicator and based on that Will set the background of Invalid symbol to RED.

How can I send AJAX request and mark invalid symbol with Border color red / bgcolor red

Thanks in advance!!

Answer 1

For cell editing you can use Ext.grid.plugin.CellEditing grid plugin. This plugin have edit( editor, context, eOpts ) event which is fired after cell was edited.

In listener for this event, you can get information about edited record from context parameter and make AJAX request to server for validation.

For set background color of the grid cell you can use:

// get element object from HTML code
var rowEl = Ext.get(context.row);
var tdElIdx =  context.colIdx + 1;
// find element of edited cell
var celEl = rowEl.down('td:nth(' + tdElIdx + ')');
// set background color of the cell
celEl.setStyle('background-color','red');