ExtJS4.2 Grid知識點一：改變表格Grid單元格文字顏色

本教程知識點是如何改變Grid中單元格中文字顏色，顯示結果如圖片：

示例代碼：http://www.itdatum.net/webui/extjs/2014/08/7929.html

在線演示：http://www.itdatum.net/online/extjs/examples-itdatum/grid-summary-1/grid-summary-1.html

實現方式是爲Grid中該列自定義renderer函數，查詢ExtJS 4.2 API得知，Ext.grid.column.Column的renderer屬性可以是一個函數也可以是字符串，這個知識點是通過函數來實現的。函數參數列表如下：

1. value : 當前待渲染的單元格值，即表格中某行某列的值，類型爲：Object

2. metaData : 當前待渲染的單元格元數據. 支持的屬性有: tdCls, tdAttr, and style。類型爲：Object

3. record : 當前待渲染的單元格所在行數據Model，類型爲：Ext.data.Model

4. rowIndex : 當前待渲染的單元格所在行數，類型爲：Number

5. colIndex : 當前待渲染的單元格所在列數，類型爲：Number

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

7. view : 當前視圖，類型爲：Ext.view.View

8. return : 返回類型爲：String，返回結果爲待渲染的HTML代碼。

核心代碼如下：

View：UserList.js

Ext.define('Itdatum.view.UserList' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.userlist',

    title : 'All Users',
    store: 'UserStore',

    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,renderer: renderBirthday},
            {header: 'Email', dataIndex: 'email', flex: 1}
        ];

        this.callParent(arguments);
    }
});

函數：renderBirthday

function renderBirthday(v,m,r) {
    if(r.get('type')=='1') {
        return '<SPAN style="COLOR: red">' + v + '</SPAN>';
    }
				
    return v;
}