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）
若要取得 dataIndex: 'age' 的值，方式如下： record.get('age'); 、 record.data.age; record.data['age']; 、 record.raw.age; record.raw['age'];
可以 console.log(record); 來查看 record 下面的值，有 data、events、hasListeners、modified、raw、store、stores
- 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 界面）
F12 調試時，選擇元素，查看到當前表格數據的 class
這個是 metaData 下面的 tdCls 屬性值
如果對表格數據做樣式調整的話，可以利用 metaData 下的屬性 tdCls 的 class 進行 css 操作
<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) {
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;
}
}
小小的測試項目：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="ext-4/bootstrap.js"></script>
<script type="text/javascript" src="ext-4/locale/ext-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet"
href="ext-4/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/app.js"></script>
<title>Ext JS</title>
<style type="text/css">
.x-grid-cell.greencard {
background-color: #B6FFA8;
}
</style>
</head>
<body>
</body>
</html>
Column 的 renderer 函數：
{
text: 'Email',
dataIndex: 'email',
flex: 1,
renderer: function(value, metaData){
metaData.tdCls = 'greencard';
return value;
}
}
效果：
