ExtJS4.2 Grid知識點四：改變表格Grid行文字顏色,劃過Grid行時文字變粗

在ExtJS4.2 Grid知識點一：改變表格Grid單元格文字顏色一文中講解了如何改變單元格中文字顏色，接下來在本章學習如何改變Grid中整行文字的顏色，這樣就不需要爲每列單獨定義renderer函數，顯示結果如圖片：

在線演示  /  示例代碼

實現方式是在Grid中設置viewConfig屬性的getRowClass函數，函數參數列表如下：

1. record: 當前待渲染行數據Model，類型爲：Ext.data.Model

2. rowIndex: 當前待渲染行數，類型爲：Number

3. rowParams: 渲染時傳入到行模板中的配置對象，通過它可以爲行體定製樣式，該對象只在enableRowBody爲true時才生效

4. store : 當前數據Store，類型爲：Ext.data.Store

5. 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;
}