Extjs에서 행의 격자 셀 CSS를 변경하는 방법 4.1.3

Question

첫 번째 행이 임시 행으로 사용되는 ExtJs 격자가 있습니다. 그리드에서 특정 열은 편집 할 수 없습니다. 첫 번째 행 (임시)의 편집 할 수없는 셀을 편집 할 수없는 것으로 표시하려고합니다. 그 일시 행이 아닌 편집으로 그 세포를 표시하는 방법을하므로, 어떠한 값을 가지고 있지 않기 때문에 (사실을 어지는 같은 세포에만 해당) 이미지에서 선택으로

을 회색으로, 나는 그 세포를 표시하려면

Answer 1

분명히 이러한 요소에 CSS 규칙을 적용하면됩니다. 열을 타겟팅하려면 tdCls 열 구성을 사용합니다.

이 열의 표 셀에 적용 할 CSS 클래스 이름입니다.

는 행, 보통 getRowClass 방법이 사용됩니다를 대상으로하지만,이 내가이 그리드의 모든 행에서 호출되기 때문에 이것은, 잔인한 될 것이라고 생각이 특정한 경우에, 우리는 단지에 대한 클래스가 필요 첫 번째 행 그래서 나는보기의 첫 번째 행에 클래스를 추가하여보기의 viewready 이벤트에가는 것입니다.

그렇다면 솔루션이 어떻게 보이는지 다음과 같습니다. 필요한 컬럼에 대한 tdCls을 추가

{ 
    text: 'Serial', 
    dataIndex: 'serial', 
    tdCls: 'serial-column', 
    width: 200 
} 

는 첫 번째 행에 클래스를 추가

viewConfig: { 
    listeners: { 
     viewready: function (view) { 
      Ext.get(view.getNode(0)).addCls('first-row'); 
     } 
    } 
} 

은 그럼 그냥 CSS를 통해 필요한 스타일을 적용 여기

.first-row .serial-column { 
    background: #ccc; 
} 

는 작업입니다 바이올린 : https://fiddle.sencha.com/#view/editor&fiddle/26aq

추신 이것은 ExtJS 그리드 셀의 스타일링에 관한 정말 좋은 자습서입니다. http://skirtlesden.com/articles/styling-extjs-grid-cells