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.store -
view : 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;
}
}
-
效果：
网友评论