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

標籤：extjs4.2   grid   extjs   

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

650) this.width=650;" alt="ExtJS4.2 Grid知識點四：改變表格Grid行文字顏色,划過Grid行時文字變粗" src="http://www.itdatum.net/uploads/webui/2014/0814/20140814004.png" />

線上示範  /  範例程式碼

實現方式是在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;}

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