ExtJS4.2 Grid Knowledge Point two: changing grid table row background color

This tutorial knowledge point is how to change the background color of a row in a grid, display the result slice:

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

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

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

The implementation is to configure the Viewconfig property for the grid and customize the implementation of the Getrowclass function.

1. Record: The currently-rendered row data Model, type: Ext.data.Model

2. RowIndex: Number of rows currently to be rendered, type: #

3. Rowparams: A configuration object passed into the row template during rendering, which can be used to customize the style for the line body, which takes effect only when Enablerowbody is true

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

5. 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 ',     /* getrowclass: Change row style  */     viewConfig:{getRowClass:changeRowClass},    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 ';}},             {header:  ' Birthday ', dataindex:  ' Birthday ', width:120},             {header:  ' email ', dataindex:  ' email ',  flex : 1}        ];         This.callparent (arguments);     });

Function: Changerowclass

function Changerowclass (record, RowIndex, Rowparams, store) {if (Record.get ("type") = = "1") {return ' X    Grid-record-yellow '; }}

Custom style: X-grid-record-yellow

Tr.x-grid-record-yellow. x-grid-td {background:yellow;}

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