ExtJS4.2 Grid知識點二：改變Grid表格行背景顏色

本教程知識點是如何改變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函數。

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

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

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

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

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