着色每個網格單元extJS4

Question

可能重複：
Color legend for grid panel in ExtJS4

我有其中指出，網格中的每個單元可以基於一些採取任何顏色的可用8種顏色的要求標準。爲了實現這個，我在列中使用了「renderer」函數，並將meta屬性的tdCls設置爲css類，但它不起作用。有人可以幫我解決這個問題嗎？

請在下面找到示例代碼。

/**視圖類，其中包含網格面板*/

Ext.define('xxx.xxx.TestView', { 
extend:'Ext.grid.Panel', 

    columns:[{ 
    header:'A', 
    dataIndex:'a', 
    flex:1, 
    //rendering function here 
    renderer:function(value, metaData, record, rowIndex, colIndex, store) {  
     var cssClass = 'norepl'; 
     if(value != null && value != ' ') { 
      var t = record.get('xxx'); 
      t = (t.substr(2,t.indexOf('-')-2))%8; 
      cssClass = "replgrp"+t; 
     } 
     metaData.tdCls += cssClass; //attaching css property to tdCls of meta 
     return value; 
    } 
    }  
}); 

/**可用8 CSS類用於着色的*/

.replgrp0 .x-grid-cell { 
background-color: #f0f6ff; 
color: #09d6ff; 
border-left: 1px dotted rgba(2, 3, 3, 0.27); 
border-right: 1px dotted rgba(2, 3, 3, 0.27); 
} 


.replgrp1 .x-grid-cell { 
background-color: rgba(255, 183, 189, 0.22); 
color: #900; 
border-left: 1px dotted rgba(2, 3, 3, 0.27); 
border-right: 1px dotted rgba(2, 3, 3, 0.27); 
} 


.replgrp2 .x-grid-cell { 
background-color: #e2ffe2; 
color: #090; 
border-left: 1px dotted rgba(2, 3, 3, 0.27); 
border-right: 1px dotted rgba(2, 3, 3, 0.27); 
} 


.replgrp3 .x-grid-cell { 
background-color: rgba(255, 233, 228, 0.12); 
color: #99890e; 
border-left: 1px dotted rgba(2, 3, 3, 0.27); 
border-right: 1px dotted rgba(2, 3, 3, 0.27); 
} 


.replgrp4 .x-grid-cell { 
background-color: rgba(186, 242, 250, 0.10); 
color: #1a4f99; 
border-left: 1px dotted rgba(2, 3, 3, 0.27); 
border-right: 1px dotted rgba(2, 3, 3, 0.27); 
} 


.replgrp5 .x-grid-cell { 
background-color: rgba(255, 242, 239, 0.23); 
color: #ff7f00; 
border-left: 1px dotted rgba(2, 3, 3, 0.27); 
border-right: 1px dotted rgba(2, 3, 3, 0.27); 
} 


.replgrp6 .x-grid-cell { 
background-color: rgba(228, 224, 255, 0.7); 
color: rgba(29, 7, 255, 0.60); 
border-left: 1px dotted rgba(2, 3, 3, 0.27); 
border-right: 1px dotted rgba(2, 3, 3, 0.27); 
} 


.replgrp7 .x-grid-cell { 
background-color: rgba(255, 233, 228, 0.32); 
color: rgba(255, 22, 12, 0.65); 
border-left: 1px dotted rgba(2, 3, 3, 0.27); 
border-right: 1px dotted rgba(2, 3, 3, 0.27); 
} 


.norepl .x-grid-cell { 
background-color: rgb(255, 255, 255); 
color: rgb(255, 127, 0); 
border-left: 1px dotted rgba(2, 3, 3, 0.27); 
border-right: 1px dotted rgba(2, 3, 3, 0.27); 
} 

感謝和問候， 納莉

Answer 1

我似乎記得做了類似

renderer:function(value, metaData, record, rowIndex, colIndex, store){ 
if(value != null && value != ' ') { 
     var t = record.get('xxx'); 
     t = (t.substr(2,t.indexOf('-')-2))%8; 
     cssClass = "replgrp"+t; 
     value="<div class="+cssClass+">"+value+"</div> 
    } 
    return value; 

這可能是錯誤的做法:)