Cell Coloring Issues

[mike000]

I currently have a grid that has the property of having the color of its cells change depending on how big of a change the value underwent. So, some cells are white (unchanged), some are yellow (small change), some are yellow (medium change), and some are red (big change). This is currently done by using a custom cell renderer.

The problem is that this messes up how selected cells are displayed. The change in background color overwrites the selected class that the gridview adds when a cell is selected, resulting in something like this happening:

As you can see in the second of the attached images, that looks pretty ugly, and it's also hard to see the text.

I'd like to have it display such that selected cells are always blue, not a rainbow of colors.

Here's the current code I'm using for the rendering, by the way:

cellRendererWithColors : function(data,cell,record,rowIndex,columnIndex,store) {
	if(typeof record.dataComparison != "undefined" && typeof record.dataComparison[this.name] != "undefined") {				
		var difference;
		switch(record.get('displayType')) {
			case "g": case "contr": case "%gdp": case "add":
				difference = record.data[this.name] - record.dataComparison[this.name];				
				break;
			case "l":
				difference = store.calcGrowthRate(record.data[this.name],record.dataComparison[this.name],record.dataComparison[this.name]);
				break;
		}				
		difference = Math.abs(difference);
		
		if(difference >= 1) {
			cell.css = "cellColorLarge";
		}				
		else if(difference >= 0.5) {
			cell.css = "cellColorMiddle";
		}
		else if(difference >= 0.1) {
			cell.css = "cellColorSmall";
		}				
	}
	
	return data;
},

I'd appreciate any help or insight someone can offer on this problem.

[para]

I believe that the problem may be that you are overwriting the css completely.
I would ADD and REMOVE the classes as needed. Say something like:
(I don't know if cell is the correct object...it may be cell.el or something)

if(cell.hasClass('cellColorLarge')) {
	cell.removeClass('cellColorLarge');
}
if(cell.hasClass('cellColorMiddle')) {
	cell.removeClass('cellColorMiddle');
}
if(cell.hasClass('cellColorSmall')) {
	cell.removeClass('cellColorSmall');
}

if(difference >= 1) {
	cell.addClass('cellColorLarge');
}
else if(difference >= 0.5) {
	cell.addClass('cellColorMiddle');
}
else if(difference >= 0.1) {
	cell.addClass('cellColorSmall');
}

I think that when the cell is selected/unselected, it will add/remove the "selected" class to it.

[dnixon]

Depending on your selection model (row or cell selection) you can check whether the cell is selected in the renderer and if it is selected then don't change cell.css.

[mike000]

I believe that the problem may be that you are overwriting the css completely.
I would ADD and REMOVE the classes as needed. Say something like:
(I don't know if cell is the correct object...it may be cell.el or something)
I think that when the cell is selected/unselected, it will add/remove the "selected" class to it.

This seems like a logical way to solve this problem, although I can't seem to implement it correctly.

Looking at how GridView adds the selected class to cells, I tried something like:

Ext.fly(cell).addClass('cellColorLarge');

But this doesn't seem to be working. You can't just call cell.addClass because it's not an element. I'm sure it's a relatively simple fix, I just can't think of it at the moment.

Regarding dnixon's solution, I don't believe that will work. The problem is that renderers are only called when the screen refreshes, which is only when data changes. The screen does not referesh on a selection (or unselection), thus the renderers are not called then.

[brian.moeskau]

You are correct -- during the render phase, the cell being passed into your rendering function is actually a raw object that has the properties of a TD, but is not actually part of the DOM yet. An easy approach might be to append your classes instead of overwriting the existing ones like so:

		if(difference >= 1) {
			cell.css += " cellColorLarge";
		}				
		else if(difference >= 0.5) {
			cell.css += " cellColorMiddle";
		}
		else if(difference >= 0.1) {
			cell.css += " cellColorSmall";
		}

Note the += and also the extra space " " before each class name. This will be a bit tricky if you need to remove them later as you'll have to parse the style property of each cell, but if all you need is to add them, this should work. The selected cell class already has an !important rule, so the order should not matter as long as your classes do not also have !important -- the selected cell rule should still have precedence over yours.

[mike000]

Thanks, that did the trick.

Since cells can only be colored once at a time, it wasn't too hard to remove the color class like para suggested. I just did an indexof the different color class names and then took the cell.class up until that index.

[para]

Good idea writing your own simple removeClass function.
Glad you got it working.

[srisaravananwt]

Hi,

I have tried with following script to change the color of a cell in TreePanel and it is not working. Please help me to resolve this.

var position = {};
position['row'] = 3;
position['column'] = 5;
cell=marketPanel.getView().getCellByPosition(position,true);
cell.setStyle('background:#EEB4B4');[Here marketPanel is Ext.tree.Panel]

I will include these statements in a function and will call at run time.
Please let me know whether this will work.