PDA

View Full Version : Colored Numbers in cells (PivotGrid)



DarthMario
15 Nov 2010, 6:46 AM
Hello,

i need a little help! B)
How can i set different color for the value in a cell (PivotGrid)?
I get the value and the color (for example "red") from server. I want set the style (color: red) of the cell.

Greeting
Mario

JanVenekamp
15 Nov 2010, 10:23 AM
There is an example of cell coloring for PivotGrid, but not with a separate color value:
http://dev.sencha.com/deploy/dev/examples/pivotgrid/countries.html

If you want to change the color in a GridPanel based on a separate color value, you could use a renderer function: (see http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.Column&member=renderer)


{
header: 'My colored col',
dataIndex: 'value',
renderer: function(val, meta, rec) {
meta.attr = 'style="color:'+ rec.get('color') +';"';
return Ext.util.Format.htmlEncode(val);
}
}
I think this doesn't work for a PivotGrid though, because the renderers only given argument is the value of the cell.

DarthMario
16 Nov 2010, 12:53 AM
Hello,

thanks for your help.

First, my idea was it to use the renderer method of the PivotGrid. :) Unfortunately you get only the value... :(
Hmmmm.... I look further to solve the problem... Or have somebody a tip for me?

Greetings
Mario

laurentParis
16 Nov 2010, 1:13 AM
like JanVenekamp (http://www.sencha.com/forum/member.php?186299-JanVenekamp) explain to you, parameter "rec" (alias records) contain all data sending by your server !!!

DarthMario
16 Nov 2010, 1:33 AM
Hi,

i understand. But the renderer method of the PivotGrid only given the value as argument. Or i canīt see what you mean??? :)
(http://www.linguee.de/englisch-deutsch/uebersetzung/I+can%27t+see+what+you+mean..html)

laurentParis
16 Nov 2010, 1:53 AM
PivotGrid extend GridPanel ?

JanVenekamp
16 Nov 2010, 3:41 AM
@laurentParis PivotGrid uses another renderer under the bonnet, so the call to your custom renderer is different. (not in the docs though)

A solution to your problem might be to write your own aggregator function (http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.PivotGrid&member=aggregator) that returns the value and the color as the 'value'. And a custom renderer that takes the value out of the 'value' and a getCellCls function that sets the right class based on the color.

If you don't want to define classes for each color you have to override the renderRows function such that the renderer has the meta argument. Then you can set the style attribute as in my above example:



Ext.override(Ext.grid.PivotGridView, {
/**
* @private
* Renders rows between start and end indexes
* @param {Number} startRow Index of the first row to render
* @param {Number} endRow Index of the last row to render
*/
renderRows : function(startRow, endRow) {
var grid = this.grid,
rows = grid.extractData(),
rowCount = rows.length,
templates = this.templates,
renderer = grid.renderer,
hasRenderer = typeof renderer == 'function',
getCellCls = this.getCellCls,
hasGetCellCls = typeof getCellCls == 'function',
cellTemplate = templates.cell,
rowTemplate = templates.row,
rowBuffer = [],
meta = {},
tstyle = 'width:' + this.getGridInnerWidth() + 'px;',
colBuffer, column, i;

startRow = startRow || 0;
endRow = Ext.isDefined(endRow) ? endRow : rowCount - 1;

for (i = 0; i < rowCount; i++) {
row = rows[i];
colCount = row.length;
colBuffer = [];

rowIndex = startRow + i;

//build up each column's HTML
for (j = 0; j < colCount; j++) {
cell = row[j];

meta.css = j === 0 ? 'x-grid3-cell-first ' : (j == (colCount - 1) ? 'x-grid3-cell-last ' : '');
meta.attr = meta.cellAttr = '';
meta.value = cell;

if (Ext.isEmpty(meta.value)) {
meta.value = ' ';
}

if (hasRenderer) {
meta.value = renderer(meta.value, meta);
}

if (hasGetCellCls) {
meta.css += getCellCls(meta.value) + ' ';
}

colBuffer[colBuffer.length] = cellTemplate.apply(meta);
}

rowBuffer[rowBuffer.length] = rowTemplate.apply({
tstyle: tstyle,
cols : colCount,
cells : colBuffer.join(""),
alt : ''
});
}

return rowBuffer.join("");
}
});

DarthMario
18 Nov 2010, 1:07 AM
Hello JanVenekamp,

i solved the problem with an aggregator function. :) Thank you very much for your help!!