EditGridPanel改变行的颜色

Question

我用EXTJS做了一个EditGridPanel，可是每行的颜色都是一个样子，客户不满意，要我做成能根据不能的值设置不同的背景色。
我查找了API根本就没有与设置背景色相关的函数或者别的，时间很紧急，任务艰巨，希望有经验的人能给点帮助，感谢感谢

Answer 1

[url]http://www.dojochina.com/index.php?q=node/563[/url]

这个可以参考一下.

[quote]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 "红男";
} else {
return "绿女";
}
}},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);

别被吓到，这么一大段其实就是判断是男是女，然后配上颜色。你要是觉得乱，也可以这么做。

function renderSex(value) {
if (value == 'male') {
return "红男";
} else {
return "绿女";
}
}
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 "红男";
} else {
return "绿女";
}
}

是不是太简单了，下面咱们来玩点儿高级的。

function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = "";
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。[/quote]