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:
Value: The values of the cell currently being rendered, that is, the value of a column in a row of the table, type: Object
MetaData: The cell metadata that is currently being rendered. The supported properties are: Tdcls, tdattr, and style. Type is: Object
Record: The row data Model for the cell currently being rendered, type: Ext.data.Model
RowIndex: The number of rows currently being rendered for the cell, type:
Colindex: The number of columns in the current cell to be rendered, type: #
Store: Current data store, type: Ext.data.Store
View: Current View, type: Ext.view.View
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