ExtJS4.2 Grid知识点二：改变Grid表格行背景颜色
浏览数：24 /
时间：2015年06月09日
本教程知识点是如何改变Grid中某行记录背景颜色，显示结果如图片：
示例代码：http://www.itdatum.net/webui/extjs/2014/08/7930.html
在线演示：http://www.itdatum.net/online/extjs/examples-itdatum/grid-summary-2/grid-summary-2.html
实现方式是为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;
}本文出自 “Itdatum” 博客，请务必保留此出处http://1162235.blog.51cto.com/1152235/1538703
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
