Extjsグリッドは最初の行のみをレンダリングします

Question

私はextjs beginnerです。 私はいくつかの条件に基づいて各列を色付けする必要があるグリッドを持っています。 グリッドを作成し、各グリッド要素にレンダラーを追加しました。

結果は期待どおりに機能しますが、最初の行のみで動作し、すべての行にカラーコードを適用する必要があります。 私が間違っていることについて何か手掛かりがありますか？

私は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

あなたがデータセットに第3、第4、第5番目の行を追加する場合は、パターンが表示されることがあります問題は、交互に行のライトグレーの背景色によって引き起こされますカスタムカラーを上書きします。

あなたは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'