Ext Grid 列内容显示处理

如果在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>";
    }