EXTJS使用從數據庫中獲取顏色代碼動態更改網格行顏色

Question

我正在使用EXTJS網格，其行顏色將根據表中的字段（狀態字段）值進行設置。

用戶可以編輯行的字段，點擊更新後，行的顏色將根據爲該行設置的狀態字段值而改變。

我需要行背景顏色應設置從db中的表中獲取。

目前我正在設置不同的css類，並使用以下代碼檢查狀態字段值。

getRowClass: function(record, rowIndex, rp, ds) 
{ 
    if(record.get('status') == 'xxxxx') 
    { 
     return 'status-xxxxx'; 
    } 
    else if(record.get('status') == 'yyyyy') 
    { 
     return 'status-yyyyy'; 
    } 
    else 
    { 
     return 'status-zzzzzz'; 
    } 
} 

我在商店中的顏色與每行的狀態值。

但我需要顏色應該從數據庫中獲取並設置爲行背景。

任何人都可以幫助我實現這一點。

感謝

Answer 1

如果你想爲行使用來自行記錄background-color顏色，你將需要設置每行td元素的背景色行之後被渲染。

您可以因此，在網格配置爲此在refresh事件的gridView.你應該定義是這樣的：

viewConfig: { 
    listeners: { 
     refresh: function(view) {  

      // get all grid view nodes 
      var nodes = view.getNodes(); 

      for (var i = 0; i < nodes.length; i++) { 

       var node = nodes[i]; 

       // get node record 
       var record = view.getRecord(node); 

       // get color from record data 
       var color = record.get('color'); 

       // get all td elements 
       var cells = Ext.get(node).query('td'); 

       // set bacground color to all row td elements 
       for(var j = 0; j < cells.length; j++) { 
        console.log(cells[j]); 
        Ext.fly(cells[j]).setStyle('background-color', color); 
       }          
      } 
     }  
    } 
} 

撥弄活生生的例子：https://fiddle.sencha.com/#fiddle/2m8