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>');
    }

}