Question

我想根据cfgrid中的状态条件更改单元格的颜色。

例如：

如果记录的状态为“过期”，则单元格将变为红色，并以粗体显示OverDue。
如果记录的状态为截止日期（30天内），则单元格将变为黄色，并以粗体显示。
如果记录的状态为“当前”（截止日期超过30天），则该单元格将为绿色，并且当前为粗体....

我只能找到cfgridrow和cfgridcolumn的渲染。

Answer 1

您应该使用ExtJS提供的列渲染器属性。列的渲染器获取三个参数，第二个是元对象，您可以在其上设置名为attr的属性，该属性在单元格dom元素上设置为属性。您可以为单元格提供一些CSS样式，例如：

var renderer = function(value, meta, record){
    if(value == "Overdue") { meta.attr = 'style="color:red;font-weight:bold"'; }
    if(value == "Due") { meta.attr = 'style="color:yellow;font-weight:bold"'; }
    if(value == "Current") { meta.attr = 'style="color:green"'; }
    return value;
}

检查Ext.grid.ColumnModel documentation

中的setRenderer

Answer 2

我使用类似于您对网格列的需求来显示到期日期：

{
 header:    'Expiration Date',    
 dataIndex: 'ExpireDate',
 renderer:  function (value, metaData, record, rowIndex, colIndex, store) {

     if ( record.get ( 'ExpireDate' ) < new Date ( ).clearTime ( ) ) {
       metaData.css += ' y-grid3-expired-cell';
       value = '';    
     }
     if ( record.get ( 'ExpireDate' ).format ('m/d/Y') == '12/31/9999' ) {
       metaData.css += ' y-grid3-non-expired-cell';
       value = '';
     }        
     value = (value == '') ? '' : record.get ('ExpireDate').format ('m/d/Y');
   }      
   return value;    
 }

},

使用css类是更强大的解决方案，我的clases定义如下：

.y-grid3-expired-cell {
  background:         #AA0000;
} 

.y-grid3-non-expired-cell {
 background:         #00AA00;
}

只需要添加自己的逻辑和样式......

根据数据更改cfgrid（html）单元格颜色

2 个答案: