ExtJS4.2 grid Knowledge Point one: Change table grid cell text color

This tutorial is about how to change the text color of cells in a grid and display the result slices:

650) this.width=650; "src=" Http://www.itdatum.net/uploads/webui/2014/0811/20140811001.png "/>

Example code:http://www.itdatum.net/webui/extjs/2014/08/7929.html

Online Demo:http://www.itdatum.net/online/extjs/examples-itdatum/grid-summary-1/grid-summary-1.html

The implementation is to customize the renderer function for that 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, a knowledge point that is implemented by a function. 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 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 malePerson's date of birth is shown in red  */            {header:  ' Birthday ', dataindex:  ' Birthday ', width:120,renderer: renderbirthday},             {header:  ' email ', dataindex:  ' email ',  flex: 1}        ];         this.callparent (arguments);     });

Function: Renderbirthday

function Renderbirthday (v,m,r) {if (R.get (' type ') = = = ' 1 ') {return ' <span style= ' color:red ' > ' + V + ' </s    Pan> '; } return v;}

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