本教程知识点是如何改变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属性可以是一个函数也可以是字符串,这个知识点是通过函数来实现的。函数参数列表如下:
- 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代码。
核心代码如下:
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 '' + v + '';
}
return v;
}
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/11984612/viewspace-1253817/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/11984612/viewspace-1253817/