Ext

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

2018-01-05  本文已影响86人  533e11a308d9

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



实际项目应用:

<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

<%@ 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>

 

{
    text: 'Email',
    dataIndex: 'email',
    flex: 1,
    renderer: function(value, metaData){
        metaData.tdCls = 'greencard';
        return value;
    }
}

 

上一篇 下一篇

猜你喜欢

热点阅读