Ext學習筆記——grid表格渲染自定義樣式

HTML中我們通過css直接更改樣式，同理Ext通過renderer就可以更改HTML顯示的樣式。如下：

{header:"狀態", dataIndex:"status", renderer:function(value){
    if(value=="可用"){
        return "<span style='color:green, font-weight:bold'>可用</span>";
    }else{
        return "<span style='color:red, font-weight:bold'>禁用</span>";
    }
}

更改名稱列：

function renderMotif(data, cell, record, rowIndex, columnIndex, store){  
    cell.style="background-color:";  
    return data;  
}  

在列中應用：

{header:'名稱', dataIndex:'name', renderer:renderMotif}

解釋一下，函數renderMotif傳入的值中，
data：列表的值，
cell：列表相關屬性，主要有css和id，
record：數據對象，如果我們想獲取其他列的值，可通過record.data["id"]的方式得到，
rowIndex：行號，當前頁中所記錄的順序，
columnsIndex：列號，
store：構造表格時傳遞的ds。

在columns中插入new Ext.grid.Rownumberer(),可自動顯示列行號。

表格加入複選框代碼如下：

var sm = new Ext.grid.selection.CheckboxModel({checkOnly:true});  //只允許用戶通過複選框選中
var grid = new Ext.grid.GridPanel({
    renderTo:'grid',
    store:store,
    columns:columns,
    selModel:sm,
    stripeRows:true,
    loadMask:true,
    forceFit:true
})