Ext JS - JavaScript framework for web apps | Sencha.com
Ext JS 4.2 官方文檔地址
http://docs-devel.sencha.com/extjs/4.2.2/#!/api
搜索renderer即可查詢API，Ext.grid.column.ColumnView.renderer
renderer : Function/String
A renderer is an ‘interceptor’ method which can be used to transform data (value, appearance, etc.) before it is rendered. Example:
{
renderer: function(value){
if (value === 1) {
return '1 person';
}
return value + ' people';
}
}Additionally a string naming an Ext.util.Format method can be passed:
{
renderer: 'uppercase'
}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 和樣式。
做修改的時候，可以這麼操作metaData.tdCls=?、metaData.tdAttr=?record : Ext.data.Model
The record for the current row 當前行的記錄
若當前單元格的dataIndex爲age的話，取值方式爲：record.data['id']record.data.age、record.data['age']record.raw.age、record.raw['age']
![]()
rowIndex : Number
The index of the current row 當前行的索引
colIndex : Number
The index of the current column 當前列的索引
store : Ext.data.Store
The data store 數據存儲、數據源
數據源就是Grid的data store/ds） 創格建表時候傳遞的ds，表格後的所有數據，均可以自由調用 ，注：ds = new Ext.data.storeview : Ext.view.View
The current view 當前視圖
return : String
The HTML string to be rendered. 要呈現的 HTML 字符串。
項目中可以通過瀏覽器控制檯打印，查看更多關於參數下面的內容：
實際項目應用：
GridPanel 中，對 Columns 進行渲染，效果如下：
JSP 頁面 CSS（ext 頁面是通過當前 JSP 頁面，引入一條 js 文件，ext 代碼寫在此js 中，構造 ext 界面），F12 調試時，選擇元素，查看到當前表格數據的 class
這個是 metaData 下面的 tdCls 屬性值：
tdCls: "x-grid-cell x-grid-td x-grid-cell-gridcolumn-1013 x-grid-cell-last x-unselectable
若操作此列背景，可以對 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>
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;
}
}Ext demo
HTML
<%@ 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>
renderer 函數：
{
text: 'Email',
dataIndex: 'email',
flex: 1,
renderer: function(value, metaData){
metaData.tdCls = 'greencard';
return value;
}
}
效果：
