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