ExtJS：在網格面板中設置行列的樣式

Question

單擊/選擇行時，我想將樣式應用於網格面板中某行的特定列。 我可以使用rowClick事件來捕獲上述事件並為該行應用特定的任何樣式。 但是，當我單擊網格中的另一行時，我也想還原任何行上的應用樣式。

我想到的一個想法是，保持上一行被點擊的狀態。 有沒有更簡單的方法可以實現上述目標。

Answer 1

使用Grid的itemClick事件，並使用event參數，您可以直接進入單元格

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

}

Answer 2

您必須以某種形式維護狀態：
...您可以初始化變量（ selectedRow ）來保存當前選中的行，然后在rowClick上調用一個函數以還原當前selectedRow的狀態，將selectedRow varialbe更新為新行，並將樣式應用於新的selectedRow 。

Answer 3

您可以使用rowdeselect事件來刪除應用的樣式。 如果在選擇行時應用樣式，則很可能要在取消選擇時將其刪除。

如果設置了SelectionModel的singleSelect屬性，則在選擇第二行時，第一行將觸發rowdeselect事件。

另一個解決方案：

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
}