对grid组件的操作示例1

 

怎么样？是不是效果大不同了。你不会认为很难吧，嗯，确实，如果你对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='查看详细信息' οnclick='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的地方，这些参数都是在这里传进去的。

好，看看效果吧。