ExtJS4.2 Grid Knowledge Point three: Change table grid cell background color

In the ExtJS4.2 grid knowledge point one: Change table grid cell text color in the article explains how to change the text color in the cell, next in this chapter to learn how to change the background color of cells in the grid, display the result slice:

650) this.width=650; "alt=" ExtJS4.2 grid knowledge point three: Change table grid cell background color "src=" http://www.itdatum.net/uploads/webui/2014/0814/ 20140814001.png "/>

Online Demo / Sample code

The implementation is also a custom renderer function for the column in the grid, and the query ExtJS 4.2 API learns that the Renderer property of Ext.grid.column.Column can be a function or a string, and this knowledge point is implemented through functions. The function parameter list is as follows:

1. Value: The values of the cell currently being rendered, that is, the value of a column in a row of the table, type: Object

2. MetaData: The cell metadata that is currently being rendered. The supported properties are: Tdcls, tdattr, and style. Type is: Object

3. Record: The row data Model for the cell currently being rendered, type: Ext.data.Model

4. RowIndex: The number of rows currently being rendered for the cell, type:

5. Colindex: The number of columns in the current cell to be rendered, type: #

6. Store: Current data store, type: Ext.data.Store

7. View: Current View, type: Ext.view.View

8. Return: The returned type is: String, returning the result as the HTML code to be rendered.

The difference is that you specify a custom style by metadata.tdcls the X-grid-record-gray,renderer function code as follows:

function Renderbirthday (v,m,r) {if (R.get (' type ') = = ' 1 ') {/* Displays the date of birth of the man as Red */return ' <span style= ' COL    Or:red ">" + V + ' </SPAN> ';    }else {/* Displays the woman's birth date background color as blue */m.tdcls= ' x-grid-record-gray '; } return v;}

The core code is as follows:

View:UserList.js

Ext.define (' Itdatum.view.UserList '  ,{    extend:  ' Ext.grid.Panel ',     alias :  ' widget.userlist ',    title :  ' all users ',     store:  ' Userstore ',     initcomponent: function ()  {         this.columns = [             {header:  ' name ',  dataindex:  ' name ',   width :100},            {header:  ' Idno ',  dataindex:  ' Idno ', width:150},             {header:  ' Gender ', dataindex:  ' type ',  width:60,renderer : function (v)  {return v==1 ?  ' men '  :  ' women ';}},             /*  the maleThe date of birth is shown in red, and the woman's birth date background color is displayed as blue  */            { header:  ' Birthday ', dataindex:  ' Birthday ', width:120,renderer: renderbirthday},             {header:  ' Email ', dataindex:  ' Email ', flex: 1}        ];         this.callparent (arguments);     });

Custom style: X-grid-record-gray

. X-grid-record-gray. X-grid-cell-inner {background:blue;}

Note : The above style if you do not specify . X-grid-cell-inner, the rendered effect is as follows:

650) this.width=650; "alt=" ExtJS4.2 grid knowledge point three: Change table grid cell background color "src=" http://www.itdatum.net/uploads/webui/2014/0814/ 20140814003.png "/>

As for the reason, through Firebug in Firefox view CSS style can be seen, such as:

650) this.width=650; "alt=" ExtJS4.2 grid knowledge point three: Change table grid cell background color "src=" http://www.itdatum.net/uploads/webui/2014/0814/ 20140814002.png "/>

This article is from the "itdatum" blog, make sure to keep this source http://1162235.blog.51cto.com/1152235/1540266