为每个网格单元着色 extJS4 [重复]答案

【问题标题】：Coloring each grid cell extJS4 [duplicate]为每个网格单元着色 extJS4 [重复]
【发布时间】：2012-08-01 20:01:50
【问题描述】：

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

我有一个要求，即网格中的每个单元格都可以根据某些标准从可用的 8 种颜色中提取任何颜色。为了实现这一点，我在列中使用了“renderer”函数并将元属性的 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);
}

感谢和问候，纳里

【问题讨论】：

设置 tdCls 应该足够了。您是否尝试过metaData.tdCls = cssClass 或添加这样的空格：metaData.tdCls += ' ' + cssClass？

标签： extjs4

【解决方案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;

这可能是错误的做法:)

【讨论】：

谢谢:)。我得到了解决方案，但不确定它是否正确。 css 类必须是“.replgrp0 .x-grid-cell-inner”
@Nari 请accept the answer 如果这对你有用。