PDA

View Full Version : [FIXED] cell color in gridsummaryrow in modern grid



kurtov
20 Jul 2015, 3:13 AM
When I need to color a cell in grid I use 4-th argument of method Ext.grid.column.column#renderer. The 4-th argument is the refer to the current cell.
I write:


renderer: function(value, record, dataIndex, cell) {
...
if(someCondition)
cell.setInnerCls('some-cls');
else
cell.setInnerCls(null);

return value;
}

But, when I need to color a cell in gridsummaryrow plugin I can't use method Ext.grid.column.Column#summaryRenderer, because it doesn't have refer to the current cell.

Also, I can't use Ext.grid.column.Column#renderer, because in this case instead of summary cell I get cell of the first grid's row. (In this case cell of the first row gets twice: for summary row and for first row. Is this bug?).

I write:


cell: {
xtype: 'gridcell',
encodeHtml: false
},
summaryRenderer: function(value) {
if(someCondition)
return '<div class="some-cls">'+value+'</div>';
else
return value;
}


This work for me, but I think this is ugly code, because I use plain html. Is exists more pretty way to approach my goal?

mitchellsimoens
28 Jul 2015, 6:49 AM
I've filed this as an improvement. You can use this override to fix this, it adds the cell as the 3rd argument:


Ext.define('Override.grid.plugin.SummaryRow', {
override : 'Ext.grid.plugin.SummaryRow',

//EXTJS-18713

doUpdateSummary: function() {
var me = this,
grid = me.getGrid(),
store = grid.getStore(),
columns = grid.getColumns(),
ln = columns.length,
emptyText = me.getEmptyText(),
emptyCls = me.getEmptyCls(),
i, column, type, renderer, cell, value, field;

for (i = 0; i < ln; i++) {
column = columns[i];
type = column.getSummaryType();
cell = me.getCellByColumn(column);

if (!column.getIgnore() && type !== null) {
field = column.getDataIndex();
renderer = column.getSummaryRenderer();

if (Ext.isFunction(type)) {
value = type.call(store, store.data.items.slice(), field);
} else {
switch (type) {
default:
value = Ext.callback(type, null, [
store.data.items.slice(), field, store
], 0, me);

break;

case 'sum':
case 'average':
case 'min':
case 'max':
value = store[type](column.getDataIndex());
break;

case 'count':
value = store.getCount();
break;
}
}

if (renderer !== null) {
type = typeof renderer;
if (type === 'function') {
value = renderer.call(store, value, store, cell);
} else if (type === 'string') {
value = Ext.callback(renderer, null, [value, store, cell], 0, me);
}
}

cell.element.removeCls(emptyCls);
cell.setValue(value);
} else {
cell.element.addCls(emptyCls);
cell.setValue(emptyText);
}
}
}
});

Testcase: https://fiddle.sencha.com/#fiddle/r83 you can uncomment the override and the summary cell should have a blue background with white text.

kurtov
30 Jul 2015, 5:52 AM
It is great!

rabia mahmood
10 Mar 2016, 12:09 AM
After trying a number of different things that wouldn't work using cell.setInnerCls('cls') finally allowed me to alter the cell back ground colour based on the cell value.



columns: [
{
text: 'Quantity',
dataIndex: 'quantity',
flex: 1,
renderer: function(value, record, dataIndex, cell) {
if (value <= 25) {
cell.setInnerCls('red-cell');
return value;
}
if (value >= 75) {
cell.setInnerCls('green-cell');
return value;
}
else {
cell.setInnerCls('yellow-cell');
return value;
}
}
}
]


I then added the following to a scss file in the modern > sass > src folder :

.red-cell { background-color: #ff0000; }
.green-cell { background-color: #009933; }
.amber-cell { background-color: #ffff00; }