//构造列
var cm = new Ext.grid.ColumnModel([
{ id: 'company', header: "Company", width: 160, sortable: true, dataIndex: 'company' },
{ header: "Price", width: 75, sortable: true, dataIndex: 'price' },
{ header: "Change", width: 75, sortable: true, dataIndex: 'change', renderer: change },
{ header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange', renderer: pctChange },
{ header: "Last Updated", width: 120, sortable: true, dataIndex: 'lastChange',renderer:Ext.util.Format.dateRenderer("Y-m-d h:i") }
]);
// Change列的renderer函数
function change(val) {
if (val > 0) {
return '<span>' + val + '</span>';
} else if (val < 0) {
return '<span>' + val + '</span>';
}
return val;
}
// % Change列的renderer函数
function pctChange(val) {
if (val > 0) {
return '<span>' + val + '%</span>';
} else if (val < 0) {
return '<span>' + val + '%</span>';
}
return val;
}
renderer可以理解为一个“解释器”方法，它用来在显示数据之前转化数据。可以有三种方式来实现renderer：
使用一个返回HTML标记的renderer函数
Ext.util.Format类的一个属性，该属性提供一个renderer函数
一个包括renderer函数和作用域的对象
我们的例子用到了前两种方式。renderer函数传递6个参数，保存了单元格的所有信息，这里只用到了第一个参数，它保存了单元格的值，其它参数的意义我们可以参考帮助文档。
现在运行程序，可以看到我们希望的效果了：负增长用了赤字来表示，作为对比，正的增长用了绿颜色，时间也按照我们希望的格式显示了出来。
有的时候，我们还希望给每一行编号，这个实现起来也很容易，我们只要在ColumnModel的构造函数里边加上new Ext.grid.RowNumberer()就可以了：
复制代码 代码如下: