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事件。好了希望大家能夠看的明白