ExtJS4 中网格面板的颜色图例 [英] Color legend for grid panel in ExtJS4
问题描述
我要求网格中的每个单元格都可以根据某些标准从可用的 8 种颜色中提取任何颜色.之后,我需要在网格面板下方显示这 8 种颜色的颜色图例及其标签名称.有人可以建议我 ExtJS4 是否有任何网格功能或有关如何解决此问题的任何想法.
I have a requirement that each cell in the grid can take any color out of available 8 colors based on some criteria. After that I need to show a color legend of those 8 colors and their tag names below the grid panel. Can somebody suggest me if ExtJS4 has any that kind of feature for grids or any idea on how can I approach this problem.
/** CSS 示例 */
/** Example of CSS */
.r1 .x-grid-cell-inner {
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);
}
.r2 .x-grid-cell-inner {
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);
}
.r3 .x-grid-cell-inner {
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);
}
.r4 .x-grid-cell-inner {
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);
}
.r5 .x-grid-cell-inner {
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);
}
.r6 .x-grid-cell-inner {
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);
}
.r7 .x-grid-cell-inner {
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);
}
.r8 .x-grid-cell-inner {
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);
}
.n1 .x-grid-cell-inner {
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);
}
推荐答案
我不得不做类似的事情.
I've had to do something similar.
我使用列的 renderer
配置根据值将颜色"类应用到单元格.
I applied a "color" class to the cell based on the value using the column's renderer
config.
在我的例子中,值决定了单元格的颜色.
In my case the value determined the color of the cell.
这是渲染器:
// ... other column configs
renderer: function(value, meta, record) {
switch(value) {
case 1 :
meta.tdCls = 'orange-cell';
break;
case 2 :
meta.tdCls = 'light-orange-cell';
break;
case 3 :
meta.tdCls = 'green-cell';
break;
}
// I only had a color in my cell without any kind of value
// so didn't include the following return statement. I added it here
// just so you would know that you can have it also.
return value;
}
CSS 类如下所示:
.orange-cell {
background-color: #ffbb22 !important;
}
.light-orange-cell {
background-color: #33cc55 !important;
}
.green-cell {
background-color: #ffeecc !important;
}
这在 ExtJS 4.1.0 中运行良好
This is working fine with ExtJS 4.1.0
这篇关于ExtJS4 中网格面板的颜色图例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!