数据表格最常见的一种要求就是对于特殊的数据，为了能够一眼看到，显示时给予特殊格式的显示，或者是字体颜色有异于其他表格，或者背景颜色有异于其他表格，这样数据就会很明显，查找时也容易。效果如下：
截图中分数在80~90之间的数据，背景颜色为一种，90以上的又是另一种，其实就是渲染单元格的背景样式，截图中科目为“语文”的显示字体为红色，也是对单元格中字体的渲染，代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>渲染gridpanel的单元格颜色</title> 5 <link href="http://www.cnblogs.com/Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 6 <style type="text/css"> 7 .x-grid-cell.good 8 { 9 background-color: #FF8C00; 10 } 11 .x-grid-cell.better 12 { 13 background-color: #FF4500; 14 } 15 </style> 16 <script src="http://www.cnblogs.com/Ext/ext-all.js" type="text/javascript"></script> 17 <script src="http://www.cnblogs.com/Ext/locale/ext-lang-zh_CN.js" type="text/javascript"></script> 18 19 <script type="text/javascript"> 20 Ext.Loader.setConfig({ 21 enabled: true 22 }); 23 Ext.require([ 24 "Ext.data.*", 25 "Ext.grid.Panel" 26 ]); 27 Ext.onReady(function () { 28 29 Ext.define("Score", { 30 extend: "Ext.data.Model", 31 fields: [{ 32 name: "usernum" 33 }, { 34 name: "username" 35 }, { 36 name: "coursename" 37 }, { 38 name: "score", type: "int" 39 }] 40 }); 41 42 var scoreStore = Ext.create("Ext.data.Store", { 43 model: "Score", 44 autoLoad: true, 45 proxy: { 46 type: "ajax", 47 url: "http://www.cnblogs.com/Data/score.js", 48 reader: { 49 type: "json", 50 root: "data", 51 totalProperty: "totalcount" 52 } 53 } 54 }); 55 56 var grid = Ext.create("Ext.grid.Panel", { 57 store: scoreStore, 58 border: false, 59 renderTo: Ext.getBody(), 60 columnLines: true, 61 viewConfig: { stripeRows: true }, 62 columns: [{ 63 text: "编号", 64 dataIndex: "usernum", 65 80 66 }, { 67 text: "姓名", 68 dataIndex: "username", 69 60 70 }, { 71 text: "科目", 72 dataIndex: "coursename", 73 80, 74 renderer: function (value) { 75 if (value == "语文") { 76 return "<span style='color:red'>" + value + "</span>"; 77 } 78 else { 79 return value; 80 } 81 } 82 }, { 83 text: "分数", 84 dataIndex: "score", 85 60, 86 renderer: function (value, meta, record, rowIdx, colIdx, store) { 87 if (value >= 80 && value <= 90) { 88 meta.tdCls = "good"; 89 } 90 if (value >= 90) { 91 meta.tdCls = "better"; 92 } 93 return value; 94 } 95 }] 96 }); 97 98 99 }); 100 </script> 101 </head> 102 <body> 103 </body> 104 </html>
字体颜色的渲染在75~80行，直接加了样式，单元格样式的修改增加了样式表，代码86~93行，需要注意的是，样式表必须要加上.x-grid-cell+你的样式名称，才能起作用，直接写一个样式是不起作用的。