내선 JS 안녕하세요 <br> 내가 내선 JS에 새로 온 사람 행 배경색

Question

을 클릭하고 PHP에서 생성됩니다 나는 그리드 whidth folowing 분야

columns: [ 
{ 
    header : 'Firs name', 
    width : 200, 
    sortable : true, 
    dataIndex: 'firstName' 
}, 
{ 
    header : 'Last name', 
    width : 200, 
    sortable : true, 
    dataIndex: 'lastName' 
}, 
{ 
    header : 'Favourite color', 
    width : 195, 
    sortable : true, 
    dataIndex: 'favouriteColor' 
} 

], 

값을 만들었습니다.
사용자가 doubleCllick을 선택하면 해당 행의 배경색이 사용자가 선호하는 색상 (빨강, 파랑, 노랑색)이됩니다.
은 지금까지 나는

grid.on('rowdblclick', function(grid,index,e) { 
    alert(index); 
    }); 

... 난 클릭 한 행의 인덱스를 가지고 있음을 해봤지만, 나는 그것의 배경색을 변경하는 방법을 모르겠어요. 어떤 도움을 주셔서 감사합니다.

Answer 1

선택한 행의 DOM을 가져 오려면 GridView 객체를 사용해야합니다. 그리고 그 행에 원하는 색상의 CSS를 적용하십시오. 먼저 몇 가지 CSS 클래스를 만들어야합니다.

.redrow { 
    background-color: red !important; 
} 

마찬가지로 파란색과 노란색입니다. 다음으로 행을 가져 와서 CSS 클래스를 행에 추가해야합니다.

---

grid.on('rowdblclick', function(grid,index,e) { 
    var color = grid.getStore().getAt(index).get('favouriteColor'); 

    if(color == 'red') 
     Ext.fly(grid.getView().getRow(index)).addClass('redrow'); 
    else if(color == 'blue') 
     Ext.fly(grid.getView().getRow(index)).addClass('bluerow'); 
    . 
    . 
    . 
}); 

당신이 (가) favouriteColor 컬럼에 따라 그리드의 행의 배경색을 변경하려는 경우, 당신은 다른 방법을 사용해야합니다.

viewConfig: { 
    forceFit: true, 
    getRowClass: function(record, index,prarms,store) { 
     var color = record.get('favouriteColor'); 
     if(color == 'red') 
      return 'redrow'; 
     else if(color == 'blue') 
      return 'bluerow'; 
     else if (color == 'yellow') 
      return 'yellowrow'; 
     else 
      return;   
    } 
} 

ViewConfig 그리드 선언과 함께 사용된다 : 아래 그림과 같이 당신은 ViewConfig의 사용을하고 getRowClass 방법을 구현할 수 있습니다. getRowClass의 반환 값을 사용하지 마십시오. 프레임 워크는 반환 값을 사용합니다. 행에 적합한 CSS 클래스를 선택하기위한 논리 만 작성하면됩니다. 그리드가 렌더링 될 때 배경색을 표시해야하는 경우 getRowClass 메서드를 사용할 수 있습니다. 사용자 이벤트 중에 또는 그리드가 렌더링 된 후에는 사용할 수 없습니다.

사용자가 행 오른쪽을 두 번 클릭 할 때 행의 색상을 변경하기 때문에이 방법이 필요하지 않습니까? 따라서 행의 배경을 해당 행의 favouriteColor 값에 따라 변경하는 경우 대답의 첫 번째 부분을 참조 할 수 있습니다.