How to change the background color of a cell using extjs Grid

First case: Change the column color when loading data

First, define a style as follows (here the red background is used as an example ):

. X-grid-back-red {
Background: # ff0000;
}

 

 

Define columns for changing colors:

{Header: 'summary', dataindex: 'zhaoyao', align: 'left', width: 150,
Renderer: function (v, m ){
M.css = 'x-grid-back-red ';
Return V;
}
:

Case 2: change the color of the row after loading data.

The first problem to be solved is that if the data has been loaded, the simplest method is to add an onload event to the store of the grid.
If you want to change the background color of a row conditionally, you also need to traverse the gird store. Here is a simple method: Store
The each method. Let's look at the example below:

Grid. getstore (). On ('load', function (s, records ){
VaR girdcount = 0;
S. Each (function (r ){
If (R. Get ('zy ') = 'total of current data '){
Grid. getview (). getrow (girdcount). style. backgroundcolor = '# ffff00 ';
} Else if (R. Get ('zy ') = 'accumulated this year '){
Grid. getview (). getrow (girdcount). style. backgroundcolor = '# ff1493 ';
} Else if (R. Get ('zy ') = 'opening balance '){
Grid. getview (). getrow (girdcount). style. backgroundcolor = '# dcdcdc ';
}
Girdcount = girdcount + 1;
});
}); As follows:

Case 3: Use the color rendering of ext

Only one effect that ext has designed: the background color of single and double rows is different.
It's easy to configure striperows to true in the grid!

In addition, if you want to use the background color of the customized line, modify ext-all.css and provide the following code: ---------modify the code in ext-all.css ---------

. X-grid3-row {

Border-color: # ffaaee; // change the border color of the grid.

Border-top-color: # FFF;

}

 

. X-grid3-row-alt {

Background-color: # ddeeaa; // you can change the color of a row.

}

 

. X-grid3-row-over {

Border-color: # DDD;

Background-color: # ee1166; // move the mouse up to change the background color of the row.

Background-image: URL (../images/default/GRID/row-over.gif );

}

 

// Modify grid. getview (). addrowclass (R, CSS) of a grid row)

// Modify the style of a grid cell Ext. get (grid. getview (). getcell (R, c )). addclass (CSS) or grid. getview (). getrow (R ). style. backgroundcolor = "red"; // the CSS style is custom