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

Question

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

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

Answer 1

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

Answer 2

Вы можете использовать событие 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 
} 

Answer 3

Использование события 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>'); 
    } 

}