Extjs4.1 gridPanel单元格背景颜色渲染

最新推荐文章于 2024-04-29 17:01:02 发布

weixin_34355881

最新推荐文章于 2024-04-29 17:01:02 发布

阅读量115

点赞数

文章标签： xhtml javascript json ViewUI

原文链接：http://www.cnblogs.com/mayantao/archive/2013/03/18/2966514.html

版权

数据表格最常见的一种要求就是对于特殊的数据，为了能够一眼看到，显示时给予特殊格式的显示，或者是字体颜色有异于其他表格，或者背景颜色有异于其他表格，这样数据就会很明显，查找时也容易。效果如下：

截图中分数在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                     width: 80
 66                 }, {
 67                     text: "姓名",
 68                     dataIndex: "username",
 69                     width: 60
 70                 }, {
 71                     text: "科目",
 72                     dataIndex: "coursename",
 73                     width: 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                     width: 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+你的样式名称，才能起作用，直接写一个样式是不起作用的。

转载于:https://www.cnblogs.com/mayantao/archive/2013/03/18/2966514.html

weixin_34355881

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs4.1 gridPanel单元格背景颜色渲染

数据表格最常见的一种要求就是对于特殊的数据，为了能够一眼看到，显示时给予特殊格式的显示，或者是字体颜色有异于其他表格，或者背景颜色有异于其他表格，这样数据就会很明显，查找时也容易。效果如下：截图中分数在80~90之间的数据，背景颜色为一种，90以上的又是另一种，其实就是渲染单元格的背景样式，截图中科目为“语文”的显示字体为红色，也是对单元格中字体的渲染，代码如下： 1 <!...
复制链接

扫一扫