Ext JS - renderer 函数中各参数含义

Ext JS - JavaScript framework for web apps | Sencha.com

Ext JS 4.2 官方文档地址
http://docs-devel.sencha.com/extjs/4.2.2/#!/api
搜索renderer即可查询APIExt.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 当前行的记录
    若当前单元格的dataIndexage的话,取值方式为:

    • record.data['id']
    • record.data.agerecord.data['age']
    • record.raw.agerecord.raw['age']
      Ext JS - renderer 函数中各参数含义_第1张图片
  • rowIndex : Number

    The index of the current row 当前行的索引

  • colIndex : Number

    The index of the current column 当前列的索引

  • store : Ext.data.Store

    The data store 数据存储、数据源
    数据源就是Griddata store/ds) 创格建表时候传递的ds,表格后的所有数据,均可以自由调用 ,注:ds = new Ext.data.store

  • view : Ext.view.View

    The current view 当前视图

  • return : String

    The HTML string to be rendered. 要呈现的 HTML 字符串。


项目中可以通过浏览器控制台打印,查看更多关于参数下面的内容:
Ext JS - renderer 函数中各参数含义_第2张图片


实际项目应用:
GridPanel 中,对 Columns 进行渲染,效果如下:
Ext JS - renderer 函数中各参数含义_第3张图片

JSP 页面 CSSext 页面是通过当前 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

若操作此列背景,可以对 metaDatatdCls 属性 的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 + "/";
%>

<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 JStitle>
<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;
    }
}

 
效果:

你可能感兴趣的:(Ext,JS)