《仔仔细细分析Ext》 第N-2章 GridPanel的小难点 第一节 每条数据后面跟随几个操作按钮

《仔仔细细分析Ext》 第N-2章 GridPanel的小难点 第一节 每条数据后面跟随几个操作按钮

EXTQQJavaScript脚本工作

导言：
      这是一篇学习笔记。
      虽然用GridPanel来展示数据稍微有那么一点死板，从视觉效果上看，呵呵。
      但是，有时候还是不得不用。
      相信拿GridPanel做基本的数据展示大家都是没有问题的，实在不记得还可以参考/examples/grid目录下的grid3.html这个例子（版本：Ext2.2）。
      这个里面有个小难点，我刚开始学Ext的时候碰到过，后来也有人问过我。需要实现的界面格式是这样的：
    

 

      或者用图标的形式：
    

 
   
      其实这里说的“小难点”指的是每条数据后面的那几个链接或者小按钮。说实话之前做过这个界面，但是这部分代码是别人写的，我以为很简单，就没去看。前段时间有人问我这个问题，我硬生生一点说不出来，汗。。。今天有点空，仔细看了一把，很熟悉的大侠就不用看了，时间宝贵，呵呵。
下面来小分析一把这种展示界面，权且称作“Ext标准grid展示”吧。

 


分析：
    

 
    如图所示，这种界面分几大块，这里只关注右侧的这些链接或者按钮的实现，其它的部分是很简单的，所以略去。
    第一种做法：使用渲染器renderer
    关注一下ColumnModel的写法就可以了。

Js代码  收藏代码
  1. var cm=new Ext.grid.ColumnModel([  
  2.     sm,  
  3.     rowNum,  
  4.     {header: "姓名", dataIndex:'name',width: 100, sortable: true},  
  5.     {header: "年龄", dataIndex:'age',width: 50, sortable: true},  
  6.     {header: "工作", dataIndex:'work',width: 150, sortable: true},  
  7.     {header: "公司", dataIndex:'company',width: 100, sortable: true},  
  8.     {header: "所属行业", dataIndex:'industry',width: 80, sortable: true},  
  9.     {header: "群", dataIndex:'QQ',width:150, sortable: true},  
  10.     {header: "操作", dataIndex:'id',width:150, sortable: true,renderer:function(value,meta,record){  
  11.           var resultStr = "<div class='controlBtn'>" +  
  12.                             "<a href='javascript:void("+record.get('id')+");' class='alarm_detail'>详细</a>&nbsp;&nbsp;&nbsp;& nbsp;" +  
  13.                             "<a href='javascript:void("+record.get('id')+");' class='alarm_detail'>删除</a>&nbsp;&nbsp;&nbsp;& nbsp;" +  
  14.                             "<a href='javascript:void("+record.get('id')+");' class='alarm_detail'>图表</a>&nbsp;&nbsp;&nbsp;& nbsp;" +  
  15.                             "<a href='javascript:void("+record.get('id')+");' class='alarm_detail'>曲线</a>&nbsp;&nbsp;&nbsp;& nbsp;" +  
  16.                             "</div>";  
  17.           return resultStr;  
  18.         }  
  19.     }  
  20. ]);  

 

     这个写法的优点是：代码比较优雅，不显乱；
     缺点是：这里面有个作用域的问题。因为做成链接这种形式，事件不是用Ext的实现来绑定的，而实际上使用了原生的事件，所以在点击之后的处理上稍微麻烦。
    2009-07-27日补充：这里是我糊涂了，忘了原生事件的作用域，这个问题可以用如下的方式来解决，幸亏“天猪”提醒，代码如下：

Js代码  收藏代码
  1. /** 
  2.  * 点击操作：注意这个地方的作用域问题，因为<a href="#" onclick="dleUser()"> 
  3.  * 这里的onclick作用域是window 
  4.  */  
  5. window.delUser=function(userName){  
  6.     alert("开始删除"+userName);  
  7. }  
  8.   
  9. /** 
  10.  * 渲染器 
  11.  */  
  12. var opeartionRender=function(userName){  
  13.     return '<a href="#" onclick="delUser('+userName+')">删除</a>';  
  14. }  
  15.   
  16. /** 
  17.  * 数据列模型 
  18.  */  
  19. var cm=new Ext.grid.ColumnModel([  
  20.     sm,  
  21.     rowNum,  
  22.     {header: "姓名", dataIndex:'name',width: 100, sortable: true},  
  23.     {header: "年龄", dataIndex:'age',width: 50, sortable: true},  
  24.     {header: "工作", dataIndex:'work',width: 150, sortable: true},  
  25.     {header: "公司", dataIndex:'company',width: 100, sortable: true},  
  26.     {header: "所属行业", dataIndex:'industry',width: 80, sortable: true},  
  27.     {header: "群", dataIndex:'QQ',width:150, sortable: true},  
  28. {header: "操作", dataIndex:'name',width:150, sortable: true,renderer:opeartionRender}  
  29. ]);  
 


   
     第二种做法：使用别人封装好的Ext.ux.RowActions组件
     整体代码和需要的资源见附件。
    （注意：附件里面有agrid.js和agrid2.js两个js，一次导入一个来查看两种不同的实现效果。图标所用的图片就自己找吧。导入Ext和演示脚本的相对路径请改成你本机的有效路径）
     RowActions的问题是代码不够优雅，按钮的那些东西硬生生地入侵到了cm和gridPanel里面去了，更过份的是每条数据里面都要给按钮相关的参数，实在是不好看。
     这两种实现方式各有优点和缺点，只能看哪里合适咯，呵呵。

结语：
    今天下午在和天猪讨论的时候，他告诉我可以拿renderer来做。
    说实话，我不喜欢上来就继承，之前也有写继承，老感觉有些说不出的毛病，呵呵。拿一些工具组合组合，小界面也能出来，做成个小函数代码也不多，改起来还方便。
    JE论坛Ext板块的置顶贴的牛人建议大家“建立自己的工具箱”，这个小界面就当做我的一个小工具咯。
    这篇小笔记就这么多，希望对你有点帮助。

posted @ 2012-06-26 10:15  holyes  阅读(207)  评论(0)  编辑  收藏  举报