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