Ext Grid 列内容显示处理

最新推荐文章于 2017-09-14 15:04:42 发布

原创最新推荐文章于 2017-09-14 15:04:42 发布 · 295 阅读

0 ·

CC 4.0 BY-SA版权

EXTJS 3.4 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了在ExtGrid中如何通过特殊处理实现后台加载数据的高效展示，包括列内容的增加、Tip提示的添加、操作列的实现等。通过自定义渲染器，对数据进行个性化展示，提升用户体验。

如果在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;' onclick=‘modify();’ src='" + imagePath + "' title='修改' width='16' height='16' class='control_edit'/>" + 
                "</div>";
    }

    function myPromptRenderer(value) {
    
        return "<span title='"  + value +  "'>" + value + "</span>";
    }