ExtJS: стилизация столбца строки в панели сетки

Question

Я хотел бы применить стиль к определенному столбцу в строке на панели сетки при щелчке / выборе строки.Я могу использовать событие rowClick для захвата вышеуказанного события и применить любой стиль, специфичный для строки.Но я также хочу вернуть примененный стиль в любой строке, когда я нажимаю на другую строку в сетке.

Одна мысль, которая пришла мне в голову, состояла в том, чтобы сохранить какое-то состояние для предыдущей строки.Есть ли более простой способ для достижения вышеуказанной цели.

Answer 1

Вы можете использовать событие rowdeselect для удаления примененного стиля.Если вы применяете стиль при выделении строки, скорее всего, вы захотите удалить ее при отмене выбора.

Если свойство SelectionModel *1004* установлено, тогда, когда вторая строка выбралапервый вызовет событие 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
}

Answer 2

Используя событие itemClick таблицы, и с параметром события вы можете напрямую попасть в ячейку

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 3

Вы должны поддерживать состояние в некоторой форме:
... вы можете инициализировать переменную (selectedRow) для хранения выбранной в данный момент строки, а затем вызвать функцию rowClick, чтобы вернуть состояние для текущего selectedRowобновите selectedRow varialbe до новой строки и примените стиль к новой selectedRow.