Ext Js 3.2修改文本颜色和在表格中插入图片，主要是性别进行判断来选择图片

来源：互联网发布：pla算法R语言实现编辑：程序博客网时间：2024/05/17 00:01
1：程序
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>美化表格</title>    <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link><script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext3.2/ext-all.js"></script><script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script><script type="text/javascript"> Ext.onReady(function() {   //定义ColumnModel//复选模型（行选择模型的子类）var sm = new Ext.grid.CheckboxSelectionModel({//取消选择单元格即选中此行，只让用户选中复选框才能选中此行handleMouseDown: new Ext.emptyFn() });//自定义性别列的renderervar renderSex = function(value) {return (value == "man")?"<span style='color: red; font-weight: bold;'>男</span><img " +"src='images/man.png' />" : "<span style='color: red; font-weight: bold;'>女</span><img " +"src='images/femail.png' />"}var cum = new Ext.grid.ColumnModel([  new Ext.grid.RowNumberer(),  sm,  //复选框{header: '客户ID', dataIndex: 'memid'},{header: '客户姓名', dataIndex: 'memName'},{header: '性别', dataIndex: 'sex', renderer: renderSex},{header: '跟踪号', dataIndex: 'gcode'},{header: '日期', dataIndex: 'kdtime',                  renderer: new Ext.util.Format.dateRenderer("Y年m月d日"),                 sortable: true}]);var cumdata = [   //定义数据   ['1', 'hello', 'man', '1', '2010-05-22T02:58:04'],   ['2', 'ASP', 'femail', '2', '2010-06-07T02:58:04'],   ['3', 'JSP', 'man', '3', '2011-05-05T02:58:04'],   ['4', 'Java', 'man', '5', '2011-07-05T02:58:04'],   ['5', 'ExtJs', 'man', '5', '2011-06-01T02:58:04'],   ['6', '.Net', 'femail', '6', '2011-09-03T02:58:04']];var store = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(cumdata),reader: new Ext.data.ArrayReader({}, [   {name: 'memid'},   {name: 'memName'},   {name: 'sex'},   {name: 'gcode'},   {name: 'kdtime', type:'date', dateFormat: 'Y-m-dTH:i:s'}])});store.load();var cumgrid = new Ext.grid.GridPanel({renderTo: 'cumGrid',store: store,autoHeight: true,width: 600,viewConfig: {forceFit: true,columnsText: '显示的列',sortAscText: '升序',sortDescText: '降序'},colModel: cum,sm: sm});cumgrid.on('click', function() {var selections = cumgrid.getSelectionModel().getSelections();for(var i = 0; i<selections.length; i++) {var record = selections[i];Ext.Msg.alert("提示", "您所选中的行的编号为:" + record.get("memid") + ", 名称为" +  record.get("memName"));}});});</script>  </head>    <body>    <div id="cumGrid"> </div>  </body></html>
2：程序效果图：