Изменить цвет ячейки cfgrid (html) на основе данных

Question

Я хотел бы изменить цвет ячейки в зависимости от состояния в cfgrid.

Например:

1. Если статус записи "Просрочено", ячейка станет красной, а "Переполнение" выделено жирным шрифтом.
2. Если статус записи "Должен" (в течение 30 дней), ячейка станет желтой с "Жирным шрифтом".
3. Если статус записи Текущий (дата должна быть более 30 дней), то ячейка будет зеленой, а Текущий выделен жирным шрифтом....

Я мог только найти рендеринг для cfgridrow и cfgridcolumn.

Answer 1

Вам следует прибегнуть к свойству визуализации столбцов, предоставленному ExtJS. Рендерер для столбца получает три аргумента, второй - мета-объект, для которого вы можете установить свойство attr, которое устанавливается как атрибут элемента cell 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;
}

Проверьте setRenderer в документации Ext.grid.ColumnModel

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 является более надежным решением, мои предложения определены следующим образом:

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

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

единственное, что вам нужно сделать, это добавить свою собственную логику и стили...