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
})