extjs grid 整行变颜色_ExtJS4.2 Grid知识点二：改变Grid表格行背景颜色

本教程知识点是如何改变Grid中某行记录背景颜色，显示结果如图片：

实现方式是为Grid配置viewConfig属性，自定义实现getRowClass函数。

record: 当前待渲染行数据Model，类型为：Ext.data.Model

rowIndex: 当前待渲染行数，类型为：Number

rowParams: 渲染时传入到行模板中的配置对象，通过它可以为行体定制样式，该对象只在enableRowBody为true时才生效

store : 当前数据Store，类型为：Ext.data.Store

return : 返回类型为：String，返回结果为待渲染的HTML代码。

核心代码如下：

View：UserList.js

Ext.define('Itdatum.view.UserList' ,{

extend: 'Ext.grid.Panel',

alias : 'widget.userlist',

title : 'All Users',

store: 'UserStore', /* getRowClass：更改行样式 */ 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 ? '男' : '女';}},

{header: 'Birthday', dataIndex: 'birthday', width:120},

{header: 'Email', dataIndex: 'email', flex: 1}

];

this.callParent(arguments);

}

});

函数：changeRowClass

function changeRowClass(record, rowIndex, rowParams, store){

if (record.get("type") == "1") {

return 'x-grid-record-yellow';

}

}

自定义样式：x-grid-record-yellow

tr.x-grid-record-yellow .x-grid-td {

background: YELLOW;

}