CSSファイルを更新せずにレンダリンググリッド行

Question

グリッド列をこのような列レンダラーを使用して個別にレンダリングできます。

renderer: function(val, meta) { 
    if (val === 'i') { 
     meta.style = "background-color:#86b0f4;"; 
    }else if (val === 'n') { 
     meta.style = "background-color:#fcd1cc;"; 
    } 
    return val 
}, 

私はグリッド行にこれと同じ考え方を使用したいと思います。

残念ながら私は出くわすことができる唯一のことは、の線に沿って何かである：

viewConfig: { 
    getRowClass: function(record, rowIndex, rowParams, store){ 
     return record.get("partytype") == 6 ? "row-highlight" : ""; 
    } 
}, 

これは私が行うにはしたくないCSSファイルを更新するために、私を必要とします。

extjsのグリッド行のCSS値を直接操作できますか？

Answer 1

列レンダラのmetaパラメータにはrecordプロパティもあります。セルの値パラメータに頼る代わりに、関連する値を参照して、構成内の各列に同じメソッドへの参照を追加することができます。

レンダラーメソッドはどこでも宣言できますが、この例は簡潔にしておきます。IIFE/inline宣言を使用しました。

{ 
    // Ext.grid.Panel 
    // ... 
    columns: (function(){ 
     function columnRenderer(cellValue, meta){ 
      var value = meta.record.get('value'); 
      if(value === 'i') 
       meta.style = 'background-color:#86b0f4;'; 
      else if(value === 'n') 
       meta.style = 'background-color:#fcd1cc;'; 
      return cellValue; 
     } 
     return [ 
      { 
       text: 'Foo', 
       dataIndex: 'foo', 
       renderer: columnRenderer 
      }, 
      { 
       text: 'Bar', 
       dataIndex: 'bar', 
       renderer: columnRenderer 
      } 
     ]; 
    })() 
} 

» Fiddle