EXTjs grid 超链接

最新推荐文章于 2022-11-04 08:53:35 发布

转载最新推荐文章于 2022-11-04 08:53:35 发布 · 3k 阅读

文章标签：

#extjs #header #function #java #产品

Extjs 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用ExtJS库展示中国Java开源项目及其团队信息的方法。通过创建一个简单的表格应用，展示了如何加载数据、定义列模型以及实现单元格内链接的渲染。

Ext.onReady(function(){
    var data = [[1, 'EasyJWeb', 'EasyJF', 'www.easyjf.com'], [2, 'jfox', 'huihoo', 'www.huihoo.org'], [3, 'jdon', 'jdon', 'www.jdon.com'], [4, 'springside', 'springside', 'www.springside.org.cn']];    
    var store = new Ext.data.SimpleStore({
        data: data,
        fields: ["id", "name", "organization", "homepage"]
    });    
    var colM = new Ext.grid.ColumnModel([{
        header: "项目名称",
        dataIndex: "name",
        sortable: true
    }, {
        header: "开发团队",
        dataIndex: "organization",
        sortable: true
    }, {
        header: "网址",
        dataIndex: "homepage",
   renderer:showUrl
    }]);    
    var grid = new Ext.grid.GridPanel({    
        renderTo: "hello",        
        title: "中国Java开源产品及团队",        
        height: 200,        
        width: 600,        
        cm: colM,        
        store: store,        
        autoExpandColumn: 2    
    });    
});
function showUrl(value)
{
return "<a href='http://"+value+"' target='_blank'>"+value+"</a>";}

注意这里的showUrl函数！