为每个网格单元extJS4着色
可能重复:为每个网格单元extJS4着色,extjs4,Extjs4,可能重复: 我有一个要求,即网格中的每个单元格可以根据某些标准从可用的8种颜色中提取任何颜色。为了实现这一点,我在列中使用了“renderer”函数,并将meta属性的tdCls设置为css类,但它不起作用。有人能帮我解决这个问题吗 请在下面找到示例代码 /**包含网格面板的视图类*/ Ext.define('xxx.xxx.TestView', { extend:'Ext.grid.Panel', columns:[{ header:'A', dataIndex:'a
我有一个要求,即网格中的每个单元格可以根据某些标准从可用的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);
}
感谢和问候,
Nari我似乎记得做过类似的事情
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;
renderer:function(值、元数据、记录、行索引、colIndex、存储){
如果(值!=null&&value!=''){
var t=record.get('xxx');
t=(t.substr(2,t.indexOf('-')-2))%8;
cssClass=“replgrp”+t;
value=”“+value+”
}
返回值;
这可能是错误的做法:)谢谢:)。我得到了解决方案,但不确定它是否正确。css类必须是“.replgrp0.x-grid-cell-inner”“@Nari如果这对您有效,请。设置tdCls应该足够了。您是否尝试过
metaData.tdCls=cssClass
或添加这样的空格:metaData.tdCls+=”+cssClass
?