ExtJS : Styling a row column in a Grid Panel

I would like to apply a style to a particular column in a row in a grid Panel when the row is clicked/selected. I can use the rowClick event to capture the above event & apply any style specific to the row. But I also want to revert the applied style on any row when i click on a different row in the grid.

One thought which came to me was to maintain some state for the previous ro开发者_如何学JAVAw clicked. Is there a simpler way to accomplish the above goal.

You have to maintain state in some form:
...you could initialize a variable (selectedRow) to hold the currently selected row, then call a function on rowClick to revert the state for current selectedRow, update the selectedRow varialbe to new row, and apply style to the new selectedRow.

You can use the rowdeselect event to remove the applied style. If you apply a style while selection of a row most probably you want to remove it when you de-select it.

If the SelectionModel's singleSelect property is set then when a second row selected the first will fire a rowdeselect event.

Another solution:

onRowSelect : function(sm, rowIndex, record){
    if(sm._prevSelectedRow){
        var prevRow = mygrid.getView().getRow(sm._prevSelectedRow);
        //remove style from prevRow
    }
    //Do your stuff

    sm._prevSelectedRow = rowIndex
}

Using the itemClick event of the Grid, and with the event parameter you can get to the cell directly

fnYourItemClick: function (this, record, item, index, e, eOpts) {

    //Here you go the fancy code to update your cell
    var theCell = Ext.get(e.target);
    theCell.removeCls('<Your Old CSS Class Name>');
    theCell.addCls('<Your New CSS Class Name>');

    //Here you go the fancy code to update entire selected row of the grid
    var theRow = Ext.get(e.target).parent('tr');
    if(theRow.hasCls('<Your Old CSS Class Name>')){
        theRow.removeCls('<Your Old CSS Class Name>');
        theRow.addCls('<Your New CSS Class Name>');
    }

}