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事件。好了但愿你们可以看的明白