ExtJS фона изменения ячейки сетки на основе значения

Question

я применил визуализатор к моей сетке колонку, но цвет фона не меняется:

renderer: function(value, meta) { 
    if (parseInt(value) > 0) { 
     meta.tdCls = 'category-matching'; return value; 
    } 
    else { 
     meta.tdCls = 'category-not-matching'; return value; 
    } 
} 

CSS:

.x-grid-cell .category-matching { 
    background-color:green; 
} 
.x-grid-cell .category-not-matching { 
    background-color:red; 
} 

Я также попытался

.grid-cell-inner 

и

background-color:red; !important 

но без эффекта.

Любая идея?

Answer 1

Попробуйте это ...

renderer : function(value, meta) { 
    if(parseInt(value) > 0) { 
     meta.style = "background-color:green;"; 
    } else { 
     meta.style = "background-color:red;"; 
    } 
    return value; 
} 

Это работает для меня.

Answer 2

Попробуйте

.x-grid-cell.category-matching { 
    background-color:green; 
} 
.x-grid-cell.category-not-matching { 
    background-color:red; 
} 

Answer 3

относятся к этим например

Ext.onReady(function(){ 
    Ext.create('Ext.data.Store', { 
     storeId:'simpsonsStore', 
     fields:['name', 'email', 'change'], 
     data:{'items':[ 
      { 'name': 'Lisa', "email":"lisa@simpsons.com", "change":100 }, 
      { 'name': 'Bart', "email":"bart@simpsons.com", "change":-20 }, 
      { 'name': 'Homer', "email":"home@simpsons.com", "change":23 }, 
      { 'name': 'Marge', "email":"marge@simpsons.com", "change":-11 } 
     ]}, 
     proxy: { 
      type: 'memory', 
      reader: { 
       type: 'json', 
       root: 'items' 
      } 
     } 
    }); 

    Ext.create('Ext.grid.Panel', { 
     title: 'Simpsons', 
     store: Ext.data.StoreManager.lookup('simpsonsStore'), 
     columns: [ 
      { header: 'Name', dataIndex: 'name' }, 
      { header: 'Email', dataIndex: 'email', flex: 1 }, 
      { header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' } 
     ], 
     height: 200, 
     width: 400, 
     viewConfig: { 
      getRowClass: function(record, index) { 
       var c = record.get('change'); 
       if (c < 0) { 
        return 'price-fall'; 
       } else if (c > 0) { 
        return 'price-rise'; 
       } 
      } 
     }, 
     renderTo: Ext.getBody() 
    }); 
}); 

CSS:

.price-fall .x-change-cell { 
    background-color: #FFB0C4; 
    color:red; 
} 
.price-rise .x-change-cell { 
    background-color: #B0FFC5; 
    color:green; 
} 

Answer 4

Вдохновленный Выбрать Улыбки ... это работало для меня:

var myRender = function (value, metaData, record, rowIndex, colIndex, store, view) { 
     if (parseInt(value) < 0) { 
      metaData.attr = 'style="background-color:#ffaaaa !important;"'; 
     } 
     return value 
    }; 

и поле

{id: 'dta', dataIndex: 'days_to_arrival', renderer: myRender} 

все.

пс. сделано в рамках ExtJS v2.2.1

Answer 5

renderer: function (value, metaData) { 
    if (parseInt(value) > 0) { 
     metaData.tdStyle = 'background-color:#ffaaaa'; 
    } 
    return value 
}