Ext JS - renderer 函数

标签：模式   store   script   等级   直接   文档   att   文本   doc   

renderer 函数是一个拦截者模式，用于改变渲染到单元格的值和样式。

http://docs-devel.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-renderer Ext JS 4.2 官方文档

Defaults to: false

• value : Object

  The data value for the current cell 当前单元格数据的值

• metaData : Object

  A collection of metadata about the current cell; can be used or modified by the renderer. Recognized properties are: tdCls, tdAttr, and style.

  当前单元格的元数据集合，通过渲染器可以直接使用或者修改其部分属性值，常用的属性有：tdCls、tdAttr、style。

• record : Ext.data.Model

  The record for the current row 单元格所在当前行的所有数据记录（record）

• rowIndex : Number

  The index of the current row 当前行号

• colIndex : Number

  The index of the current column 当前列号

• store : Ext.data.Store

  The data store 当前 grid 的数据集（store）

• view : Ext.view.View

  The current view 当前 grid 所属视图（view）

• return : String

  The HTML string to be rendered. 返回一个被渲染的 HTML 文本串

实战案例：GridPanel 中，对 Columns 进行渲染，效果如下：

JSP 页面 CSS（ext 页面是通过当前 JSP 页面，引入一条 js 文件，ext 代码写在此 js 中，构造 ext 界面）

<style type="text/css">
	/** 企业信用评价结果公布复核等级名称：黄牌蓝牌等 */
	.x-grid-cell.greencard {
		background-color: #B6FFA8;
	}
	.x-grid-cell.bluecard {
		background-color: #D7E7FC;
	}
	.x-grid-cell.yellowcard {
		background-color: #FEFAD7;
	}
	.x-grid-cell.redcard {
		background-color: #F4B6B6;
	}
	.x-grid-cell.blackcard {
		background-color: #000000;
		color:white;
	}
</style>

Ext.grid.Panel 的 renderer 函数

{
	text: ‘处理结果‘,
	dataIndex: ‘fhdjmc‘, // 复核等级名称
	flex: 1,
	renderer: function (value, metaData, record) {
		if (value == null || value == ‘‘) {
			return ‘无牌‘;
		}
		// tdCls: x-grid-cell的样式
		// 例如: x-grid-cell.greencard {background-color: #B6FFA8;}
		metaData.tdCls = value == ‘绿牌‘ ? ‘greencard‘ : (value == ‘蓝牌‘ ? ‘bluecard‘ : (value == ‘黄牌‘ ? ‘yellowcard‘ : (value == ‘红牌‘) ? ‘redcard‘ : ‘blackcard‘));
		return value;
	}
}

Ext JS - renderer 函数

标签：模式   store   script   等级   直接   文档   att   文本   doc   

原文地址：http://www.cnblogs.com/ikoo4396/p/7772850.html