Extjs Grid 첫 행만 렌더링

Question

나는 초급자입니다. 일부 조건에 따라 각 열을 색칠해야하는 표가 있습니다. 그리드를 만들고 각 그리드 요소에 렌더러를 추가했습니다.

결과는 예상대로 작동하지만 첫 번째 행에만 적용되며 모든 행에 색상 코드를 적용해야합니다. 내가 뭘 잘못하고 있는지에 대한 단서가 있습니까?

나는 코드와 결과 이미지 아래에 extjs 4.3

사용합니다.

Ext.define('Example.grid', { 
extend: 'Ext.grid.Panel', 
alias: 'widget.testGrid', 
height: 240, 
margin: '10', 
store: 'teststore', 
requires: [ 
    'tests.contextmenu' 
], 
columns: [ 
    { xtype: 'gridcolumn', width:70, dataIndex: 'running', text: 'Running', 
    renderer: function(value, meta) { 
       if (value != 0) 
        meta.tdCls = 'row-background-lightyellow'; 
       return value;}}, 
    { xtype: 'gridcolumn', width:70, dataIndex: 'completed', text: 'Completed', 
    renderer: function(value, meta){ 
      if (value!=0) 
        meta.tdCls = 'row-background-lightgreen'; 
      return value;}}, 
    { xtype: 'gridcolumn', width:70, dataIndex: 'failed', text: 'Failed', 
    renderer: function(value, meta){ 
      if (value!=0) 
        meta.tdCls = 'row-background-lightred'; 
      return value;} }, 
    { xtype: 'gridcolumn', width:70, dataIndex: 'waiting', text: 'Waiting', 
    renderer: function(value, meta) { 
      if (value!=0) 
        meta.tdCls = 'row-background-lightgrey'; 
      return value;} }, 
    { xtype: 'gridcolumn', dataIndex: 'jobid', text: 'Job Id' }, 
    { xtype: 'gridcolumn', dataIndex: 'jobname', text: 'Name', renderer: rendergrey}, 
    { xtype: 'gridcolumn', dataIndex: 'reason', text: 'Info', flex: 1 } 
], 

initComponent: function() { 
     var me = this; 
     me.callParent(arguments) 
refresh: function() { 
    var me = this; 
    this.getView().refresh(); 
} 
}); 
function rendergrey(value, meta) { 
     if (value!=0) 
      meta.tdCls += 'row-background-lightgrey'; 
     return value; 
    }; 

그리고 여기 결과 :

Answer 1

당신이 당신의 데이터 세트에 세 번째, 네 번째, 다섯 번째 행을 추가하는 경우,이 패턴을 볼 수 있습니다 : 문제가 교류 행의 lightgray 배경색에 의해 발생 사용자 정의 색상을 덮어 씁니다.

CSS 코드를 추가하지 않았지만 !important을 색상 뒤에 추가하여 alt 행의 background-color보다 우선하도록 할 수 있습니다. 예 :

.row-background-lightyellow { 
    background-color: #ffc !important; 
} 

또는 당신이 당신의 grid에 완전히 viewConfig를 사용하여 교류 색상을 제거 할 수 있습니다 :

:

viewConfig: { 
    stripeRows: false 
} 

세 번째 가능성은 항상 CSS 스타일을 통해 우선 순위를 가지고 인라인 CSS를 사용하는 것입니다

// meta.tdCls = 'row-background-lightyellow' 
meta.style = 'background-color: #ffc'