color.txt

javascript ext1.X源码,主要用于界面

grid.on('click', function(e) {
	
	// 8 => tree node id 
	target = gridTree.getNodeById('8');
	
	Ext.fly(target.ui.elNode).addClass('test');
	
	// console.log(target);
});
HTML Code:
.test {
  background-color: #e2e2e2;
}


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 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)

Code:
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');
}







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:


Code:
		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.



animal has given me a tip, to do it like that :


Code:
Ext.util.CSS.updateRule("#" + containerId + " .x-grid-cell-" + colNo, "background-color", "green");and jack suggested me to use a function like this:


Code:
function renderFoo(value, p, record){ 
    if(...){ 
        p.css = 'some-css-class-with-bg-color'; 
    } 
    return value; 
}

ds.on('load', function() { 
  Ext.select('#gridId tr.x-grid-row td:first-child').addClass('yourCSSClass');
});