ExtJS : 격자 패널의 행 열 스타일 지정

Question

행을 클릭하거나 선택하면 격자 패널의 행에서 특정 열에 스타일을 적용하고 싶습니다. 위의 이벤트를 캡처하기 위해 rowClick 이벤트를 사용할 수 있습니다. & 행에 특정한 스타일을 적용하십시오. 그러나 그리드의 다른 행을 클릭 할 때 어떤 행에서도 적용된 스타일을 되돌리고 싶습니다.

내게 와서 한 가지 생각은 클릭 한 이전 행에 대한 상태를 유지하는 것이 었습니다. 위의 목표를 달성하는 간단한 방법이 있습니까? 당신이 selectedRow를 업데이트 변수 (selectedRow) 당시 selectedRow의 상태를 되돌릴 수 rowClick에 함수를 호출, 현재 선택된 행을 유지하기를 초기화 할 수 ...
:

Answer 1

당신은 어떤 형태로든 상태를 유지해야 새 행으로 변경하고 새 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>'); 
    } 

}