ExtJS4.2 Grid知識點三：改變表格Grid儲存格背景顏色

標籤：extjs   grid   extjs4.2   

在ExtJS4.2 Grid知識點一：改變表格Grid儲存格文字顏色一文中講解了如何改變儲存格中文字顏色，接下來在本章學習如何改變Grid中儲存格的背景顏色，顯示結果片：

650) this.width=650;" alt="ExtJS4.2 Grid知識點三：改變表格Grid儲存格背景顏色" src="http://www.itdatum.net/uploads/webui/2014/0814/20140814001.png" />

線上示範  /  範例程式碼

實現方式同樣是為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代碼。

其不同點在於通過metaData.tdCls指定自訂樣式x-grid-record-gray，renderer函數代碼如下：

function renderBirthday(v,m,r) {    if(r.get(‘type‘)==‘1‘) {        /* 將男人的出生日期顯示為紅色 */        return ‘<SPAN style="COLOR: red">‘ + v + ‘</SPAN>‘;    }else {        /* 將女人的出生日期背景顏色顯示為藍色 */        m.tdCls=‘x-grid-record-gray‘;    }    return v;}

核心代碼如下：

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);    }});

自訂樣式：x-grid-record-gray

.x-grid-record-gray .x-grid-cell-inner {    background: blue;}

注意：上述樣式如果不指定.x-grid-cell-inner，則呈現的效果如：

650) this.width=650;" alt="ExtJS4.2 Grid知識點三：改變表格Grid儲存格背景顏色" src="http://www.itdatum.net/uploads/webui/2014/0814/20140814003.png" />

至於其中道理，通過FireBug在FireFox查看CSS樣式可以看出，如：

650) this.width=650;" alt="ExtJS4.2 Grid知識點三：改變表格Grid儲存格背景顏色" src="http://www.itdatum.net/uploads/webui/2014/0814/20140814002.png" />

本文出自 “Itdatum” 部落格，請務必保留此出處http://1162235.blog.51cto.com/1152235/1540266