给Extjs grid中的列自定义渲染方式

最新推荐文章于 2019-06-27 18:53:20 发布

呼啸

最新推荐文章于 2019-06-27 18:53:20 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/howlaa/article/details/7860733

版权

给grid中其中网址的那一列，加上超链接，使之点击即可进入。

看代码：

 
         function showUrl(value) 
        
         {  
        
         return 
         "<a href=" 
         +value+ 
         ">" 
         +value+ 
         "</a>" 
         ; 
        
         }  
        
         Ext.onReady(function(){  
        
         var data=[ 
        
         {id: 
         1 
         ,name: 
         'EasyJWeb' 
         ,organization: 
         'EasyJf' 
         ,homepage: 
         'www.Easyjf.com' 
         }, 
        
         {id: 
         2 
         ,name: 
         'jfox' 
         ,organization: 
         'huihoo' 
         ,homepage: 
         'www.huihoo.com' 
         }, 
        
         {id: 
         3 
         ,name: 
         'jdon' 
         ,organization: 
         'jdo' 
         ,homepage: 
         'www.jdon.com' 
         }, 
        
         {id: 
         4 
         ,name: 
         'springside' 
         ,organization: 
         'springside' 
         ,homepage: 
         'www.springside.com' 
         } 
        
         ]; 
        
         var store = 
         new 
         Ext.data.JsonStore(  
        
         { 
        
         data:data, 
        
         fields:[ 
         'id' 
         , 
         'name' 
         , 
         'organization' 
         , 
         'homepage' 
         ] 
        
         }    
        
         ); 
        
         var colM = 
         new 
         Ext.grid.ColumnModel(  
        
         [ 
        
         {header: 
         '项目名称' 
         ,dataIndex: 
         'name' 
         ,sortable: 
         true 
         }, 
        
         {header: 
         '开发团队' 
         ,datIndex: 
         '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 
        
         }); 
        
         });