ext3.0学习 renderer

最新推荐文章于 2025-10-27 12:02:46 发布

最新推荐文章于 2025-10-27 12:02:46 发布 · 124 阅读

文章标签：

#javascript #ViewUI

本文介绍如何利用ExtJS框架创建一个包含自定义链接单元格的网格面板。该网格面板展示了几个知名中国网站的信息，包括它们的ID、中文名称及对应的网址。

<script type="text/javascript" src="extJs/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="extJs/ext-all.js"></script>
  <link rel="stylesheet" type="text/css" href="extJs/resources/css/ext-all.css"/>
  <script type="text/javascript">
   function abc(value){  
      return String.format('<a href="http://{0}">{0}</a>',value);
     }
 
   Ext.onReady(function(){
    var data=[[1,'百度','www.baidu.com'],
        [2,'谷歌','www.google.com'],
        [3,'迅雷','www.xunlei.com'],
        [4,'腾讯','www.qq.com']];
    var store=new Ext.data.SimpleStore({data:data,fields:["id","name","homepage"]});
    var colM = new Ext.grid.ColumnModel([{header:"中文名称",dataIndex:"name",sortable:true},
               {header:"网址",dataIndex:"homepage",renderer:abc}
              ]);
    var grid = new Ext.grid.GridPanel({
     renderTo:"hello",
     title:"中国开发团队",
     height:150,
     width:600,
     /*
     columns:[{header:"中文名称",dataIndex:"name",sortable:true},
        {header:"网址",dataIndex:"homepage"}
     ],
     */
     cm:colM,
     store:store,
     autoExpandColumn:2
    });
   });
  </script>