EXTJS系列笔记(6.X)————gridpanel每一行根据值显示不同颜色，相同的值显示相同颜色

需求就是如题所说，下面直接代码

自己定义的 css文件，表示不同背景颜色

/*淡黑*/
.backColorBlack{
	background: #E0E0E0;    
}
/*淡绿*/
.backColorGreen{  
    background: #C3FF8F;    
}  
/*淡大红*/
.backColorBigRed{  
    background: #FF9797;    
}  
/*淡红*/
.backColorRed{  
    background: #FFA6FF;    
}  
/*淡黄*/
.backColorYellow{  
    background: #FFFF93;    
} 
/*淡蓝*/
.backColorBlue{  
    background: #84C1FF;    
} 
/*淡紫*/
.backColorPurple{  
    background: #CA8EFF;    
} 
/*淡橙色*/
.backColorOri{  
    background: #FFBB77;    
} 
/*淡碧色*/
.backColorAuburn{  
    background: #9393FF;    
} 
/*淡棕*/
.backColorBrown{  
    background: #C2C287;    
} 

js代码

var colorArr = ["backColorGreen","backColorBigRed","backColorYellow",
		 "backColorRed","backColorBlue","backColorOri","backColorPurple",
		 "backColorBrown","backColorAuburn","backColorBlack"];
		 
columns: [
	{
		text: 'Lot ID',
		flex:1.2,
		dataIndex: 'lotId',
  	        renderer:function(value, row, column, rowIndex, data, table){
				var datas = row.record.getData();
				var countObj = new Object();	//用这个object来统计数量
				for(let key  in datas){
 
					if(datas[key] in countObj){
						 //如果包含了这个属性，就属性的value值+1
						 countObj[datas[key]]= (countObj[datas[key]]+1);
					}else{
						 //如果没有包含，就赋值为1
						 countObj[datas[key]] = 1;
					}
				}
				 //给每个大于2的属性分配一种颜色
				var count = 0;
				for(let key  in countObj){
					 if(countObj[key]>=2){
						 countObj[key] = colorArr[count];
						 count++;
					 }
				}
				
				//显示 颜色
				for(let key  in countObj){
					 //如果当前值等于这个key，就显示这个key的颜色。
					 if(key==value){
						 row.css=countObj[key];
					 }
				}
				return value;
    	    }
		
	}
]