Threaded View

  1. #1
    Ext User
    Join Date
    Jun 2007
    Washington, D.C.
    Vote Rating
    mike000 is on a distinguished road


    Question Cell Coloring Issues

    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[] != "undefined") {				
    		var difference;
    		switch(record.get('displayType')) {
    			case "g": case "contr": case "%gdp": case "add":
    				difference =[] - record.dataComparison[];				
    			case "l":
    				difference = store.calcGrowthRate([],record.dataComparison[],record.dataComparison[]);
    		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.
    Attached Images