extjs grid renderer用法(添加图片 获取当前ID)

今天在做项目时，需要在列表中的某列添加功能操作按钮图片,并要获得选中行的相关数据，经过查找资料，找到了相应的解决方法，现在将自己的理解进行整理，以便今后查阅。

   最重要的是renderer的用法

  ----------------------下面这段是引用其他网页资料-----------------------------

renderer可以格式化该列显示的数据格式或者按照你自定义的脚本显示最终数据样子（我目前是这么理解的）
先看下renderer: function()里的参数

renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){}
1.value是当前单元格的值
2.cellmeta里保存的是cellId单元格id，id不知道是干啥的，似乎是列号，css是这个单元格的css样式。
3.record是这行的所有数据，你想要什么，record.data["id"]这样就获得了。
4.rowIndex是行号，不是从头往下数的意思，而是计算了分页以后的结果。
5.columnIndex列号太简单了。
6.store，这个厉害，实际上这个是你构造表格时候传递的ds，也就是说表格里所有的数据，你都可以随便调用，唉，太厉害了。

=========补充说明store就是你自己定义的store = new Ext.data.SimpleStore({})

---------------------引用结束-------------------------------

 

================举例说明如何添加图片=============================

 

var store = new Ext.data.SimpleStore({
    fields : [ {
        name : "ID"
    }, {
        name : "name",
        type : "string"
    }]
});

var grid = new Ext.grid.GridPanel({
        store : store,
         columns : [ {
        id : "id",
        header : "ID",
        width : 1,
        sortable : true,
        dataIndex : "ID"
        }, {
        id : "name",
        header : "名称",
        width : 3,
        sortable : false,
        dataIndex : "name"
                 },{
        header : "操作",
        width : 1,
        sortable : false,
        dataIndex : '',
        renderer : renderDescn
            } ]
    });

 

/**
 * 添加按钮图标
 */
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
    var str = "<div title=\"修改\" style=\"background:url('../../edit.png');
       width:16px;height:17px;float:left;display:inline;cursor: pointer;\"
         onclick=\"test('"
            + record.data["ID"]
            + "');\"></div>"
            + "<div><div title=\"查看\" style=\"background:url('../../tree.png');
          width:16px;height:17px;float:left;display:inline;cursor: pointer;\"
           onclick=\"test('"
            + record.data["ID"]
            + "');\"></div>"
            + "<div title=\"删除\" style=\"background:url('../../delete.png');
               width:16px;height:17px;float:left;display:inline;
          cursor: pointer;\" onclick=\"test('"
            + record.data["ID"] + "');\"></div></div>";
    return str;
}

注意贴出的第一段代码中的最后一句代码renderer : renderDescn通过renderer调用下面方法。record.data["ID"]就是获取选中列id为 ID的值(代码中id:'id'是手下误,应该为id:'ID')。

renderDescn方法执行后实际返回了

 

<div title="修改" stytle="background:url('../../edit.png');width:16px;
height:17px;float:left;display:inline;cursor: pointer;onclick="test(ID值)"/>

这样的html代码，也就是说在添加图片的同时，还给每个图片添加了test事件。好了希望大家能够看的明白