如果在Ext Grid里面Store从后台加载的数据还不是最终要显示的列内容,那么我们需要对该列的内容作特殊处理。
处理效果可以是增加显示内容,增加tip提示,增加操作列等。
处理方法如下:
var configColumns = new Ext.grid.ColumnModel({ defaults : { sortable : true }, columns : [ new Ext.grid.RowNumberer(), { header : "学号", width : 80, dataIndex : "id", align : "left", renderer : myIdRenderer //在列内容显示之前对内容做处理 }, { header : "姓名", width : 40, dataIndex : "name", align : "left", renderer : myPromptRenderer //对列内容加tip提示 }, { header : "卡号", width : 60, dataIndex : "cardnum", align : "left" } , { id : "operation", header : "操作", width : 60, dataIndex : "operation", align : "left", sortable : false, renderer : operationRenderer }] }); function myIdRenderer(value) { if(value > 10000) { return "PB"+value; } return value; } function operationRenderer(value, cellmeta, record, rowIndex, columnIndex, store) { var imagePath = __path + "/styles/images/grid/application_edit.png"; //在该列插入一个图标,并增加tip提示,点击该图标会调用modify()方法,进行修改操作 return "<div class='controlBtn'>" + "<img style='cursor:hand;' οnclick=‘modify();’ src='" + imagePath + "' title='修改' width='16' height='16' class='control_edit'/>" + "</div>"; } function myPromptRenderer(value) { return "<span title='" + value + "'>" + value + "</span>"; }