问题描述
我用EXTJS做了一个EditGridPanel，可是每行的颜色都是一个样子，客户不满意，要我做成能根据不能的值设置不同的背景色。我查找了API根本就没有与设置背景色相关的函数或者别的，时间很紧急，任务艰巨，希望有经验的人能给点帮助，感谢感谢
解决方案
http://www.dojochina.com/index.php?q=node/563这个可以参考一下.引用2.5. 让单元格里显示红色的字，图片，按钮，你还能想到什么？ 嘿，希望你跟我一样，不愿意只能在grid里看到文字，至少不是单调的，毫无特色的文字。有些人就问了，如果我想改变一下单元格里显示内容，应该怎么办呢？非常不幸的是，ext的作者，伟大的jack早已经想到了，说真的，你没想到的，他都想到了，不只想到了，他还做出来了。唉，这就是区别啊。为啥你就不能动手做些东西呢？就知道向别人要这要那，唉。首先，我宣布，偶们的数据要扩充啦，每个人要加上一个性别字段。var data = [ ['1','male','name1','descn1'], ['2','female','name2','descn2'], ['3','male','name3','descn3'], ['4','female','name4','descn4'], ['5','male','name5','descn5']];男女搭配，干活不累撒。而且现在中国就是男多女少，我就还没对象呢。征婚中，单身女性加(QQ)771490531详谈。你可以试试不改其他的部分，显示的结果是不会改变的，因为原始数据要经过ds的处理才能被grid使用，那么下一步我们就开始修改ds，把性别加进去。var ds = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'sex'}, {name: 'name'}, {name: 'descn'} ])});添加了一行{name: 'sex'}，把数组的第二列映射为性别。现在grid可以感觉到sex了，嘿嘿。不过grid还显示不了性别这列，因为咱们还没改cm。var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'}]);到现在其实都没什么新东西，但是你不觉得光看平板字，很难分出哪个是GG哪个是MM吗？听说过红男绿女没？要是男的都加上红色，女的都变成绿色，那不是清楚多了。就像下面一样。怎么样？是不是效果大不同了。你不会认为很难吧，嗯，确实，如果你对html和css完全搞不明白的话，劝你还是先去学学吧，对自己有信心的往下看。var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex',renderer:function(value){ if (value == 'male') { return "<span style='color:red;font-weight:bold;'>红男</span>"; } else { return "<span style='color:green;font-weight:bold;'>绿女</span>"; } }}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'}]);别被吓到，这么一大段其实就是判断是男是女，然后配上颜色。你要是觉得乱，也可以这么做。function renderSex(value) { if (value == 'male') { return "<span style='color:red;font-weight:bold;'>红男</span>"; } else { return "<span style='color:green;font-weight:bold;'>绿女</span>"; }}var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex',renderer:renderSex}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'}]);实际上这个renderer属性至关重要，它的值是一个function，哦，你说不知道js里function可以这么用？那么恭喜你，现在你知道了。renderer会传递个参数进去，咱们grid里看到的，是这个函数的返回值，怎么样，神奇吧？同志们，你们也应该看到了，返回html就可以，是html啊，html里有的东西，你返回什么就显示什么，颜色，链接，图片，按钮，只要你愿意，整个网页都可以返回回去。还有什么做不到的？哦，你不会html，那没辙，回去学吧。咱们先来个图片。function renderSex(value) { if (value == 'male') { return "<span style='color:red;font-weight:bold;'>红男</span><img src='user_male.png' />"; } else { return "<span style='color:green;font-weight:bold;'>绿女</span><img src='user_female.png' />"; }}是不是太简单了，下面咱们来玩点儿高级的。function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) { var str = "<input type='button' value='查看详细信息' onclick='alert("" + "这个单元格的值是：" + value + "\n" + "这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\n" + "这个单元格对应行的record是：" + record + "，一行的数据都在里边\n" + "这是第" + rowIndex + "行\n" + "这是第" + columnIndex + "列\n" + "这个表格对应的Ext.data.Store在这里：" + store + "，随便用吧。" + "")'>"; return str;}来看看我们可以在render里用到多少参数： 1. value是当前单元格的值 2. cellmeta里保存的是cellId单元格id，id不知道是干啥的，似乎是列号，css是这个单元格的css样式。 3. record是这行的所有数据，你想要什么，record.data["id"]这样就获得了。 4. rowIndex是行号，不是从头往下数的意思，而是计算了分页以后的结果。 5. columnIndex列号太简单了。 6. store，这个厉害，实际上这个是你构造表格时候传递的ds，也就是说表格里所有的数据，你都可以随便调用，唉，太厉害了。有个同学就问啦：EXT render的参数，是如何得到的呢。因为你讲的那些都是EXT自己内部的。它是如何把这些参数传递给render的呢？这个问题其实比较简单，只是你们想复杂了。既然是函数，就肯定有调用它的地方，你找到GridView.js在里边搜索一下renderer，就会看到调用render的地方，这些参数都是在这里传进去的。好，看看效果吧。剩下的，就是发挥各位聪明才智的时候了，舞台已经搭好，看你如何表演了。html例子，1.x版本在lingo-sample/1.1.1目录下的02-02.html，2.0的版本在lingo-sample/2.0目录下的02-02.html。