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

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

1 голос
/ 01 марта 2011

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

Например:

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

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

Ответы [ 2 ]

3 голосов
/ 02 марта 2011

Вам следует прибегнуть к свойству визуализации столбцов, предоставленному 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

0 голосов
/ 02 марта 2011

Я использую что-то похожее на вашу потребность в столбце в сетке для отображения даты истечения срока действия: 

{
 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;
}

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

...