在ExtJS4.2 Grid知识点一：改变表格Grid单元格文字颜色一文中讲解了如何改变单元格中文字颜色，接下来在本章学习如何改变Grid中整行文字的颜色，这样就不需要为每列单独定义renderer函数，显示结果如图片：
实现方式是在Grid中设置viewConfig属性的getRowClass函数，函数参数列表如下：
- record: 当前待渲染行数据Model，类型为：Ext.data.Model
- rowIndex: 当前待渲染行数，类型为：Number
- rowParams: 渲染时传入到行模板中的配置对象，通过它可以为行体定制样式，该对象只在enableRowBody为true时才生效
- store : 当前数据Store，类型为：Ext.data.Store
- return : 返回类型为：String，返回结果为待渲染的HTML代码。
getRowClass对应函数changeRowClass代码：
function changeRowClass(record, rowIndex, rowParams, store){
if (record.get("type") == "1") {
return ‘x-grid-record-red‘;
}
}
核心代码如下：
View：UserList.js
Ext.define(‘Itdatum.view.UserList‘ ,{
extend: ‘Ext.grid.Panel‘,
alias : ‘widget.userlist‘,
title : ‘All Users‘,
store: ‘UserStore‘, /* getRowClass：更改行样式 */
viewConfig:{/*enableTextSelection:true,*/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);
}
});
自定义样式：x-grid-record-red
.x-grid-record-red {
color: red;
}
另外：可以通过指定样式.x-grid-row-over .x-grid-cell-inner来改变鼠标划过时单元格文字变粗，其中必须指定.x-grid-cell-inner，否则效果体现不出来。
.x-grid-row-over .x-grid-cell-inner {
font-weight: bold;
}
ExtJS4.2 Grid知识点四：改变表格Grid行文字颜色,划过Grid行时文字变粗,布布扣,bubuko.com
时间： 2024-10-22 02:31:28