ExtJS4.2 Grid知识点三：改变表格Grid单元格背景颜色

在ExtJS4.2 Grid知识点一：改变表格Grid单元格文字颜色一文中讲解了如何改变单元格中文字颜色，接下来在本章学习如何改变Grid中单元格的背景颜色，显示结果如图片：

 

在线演示  /  示例代码

 

实现方式同样是为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，则呈现的效果如下图：

 

至于其中道理，通过FireBug在FireFox查看CSS样式可以看出，如下图：