ExtJS4.2 Grid知识点三:改变表格Grid单元格背景颜色
在ExtJS4.2 Grid知识点一:改变表格Grid单元格文字颜色一文中讲解了如何改变单元格中文字颜色,接下来在本章学习如何改变Grid中单元格的背景颜色,显示结果如图片:
实现方式同样是为Grid中该列自定义renderer函数,查询ExtJS 4.2 API得知,Ext.grid.column.Column的renderer属性可以是一个函数也可以是字符串,这个知识点是通过函数来实现的。函数参数列表如下:
value : 当前待渲染的单元格值,即表格中某行某列的值,类型为:Object
metaData : 当前待渲染的单元格元数据. 支持的属性有: tdCls, tdAttr, and style。类型为:Object
record : 当前待渲染的单元格所在行数据Model,类型为:Ext.data.Model
rowIndex : 当前待渲染的单元格所在行数,类型为:Number
colIndex : 当前待渲染的单元格所在列数,类型为:Number
store : 当前数据Store,类型为:Ext.data.Store
view : 当前视图,类型为:Ext.view.View
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样式可以看出,如下图:
本文出自 “Itdatum” 博客,请务必保留此出处http://1162235.blog.51cto.com/1152235/1540266
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。