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

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

 

      或者用图标的形式：
    

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

 

分析：
    

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

    var cm=new Ext.grid.ColumnModel([
        sm,
        rowNum,
        {header: "姓名", dataIndex:'name',width: 100, sortable: true},
        {header: "年龄", dataIndex:'age',width: 50, sortable: true},
        {header: "工作", dataIndex:'work',width: 150, sortable: true},
        {header: "公司", dataIndex:'company',width: 100, sortable: true},
        {header: "所属行业", dataIndex:'industry',width: 80, sortable: true},
        {header: "群", dataIndex:'QQ',width:150, sortable: true},
        {header: "操作", dataIndex:'id',width:150, sortable: true,renderer:function(value,meta,record){
              var resultStr = "<div class='controlBtn'>" +
                                "<a href='javascript:void("+record.get('id')+");' class='alarm_detail'>详细</a>&nbsp;&nbsp;&nbsp;& nbsp;" +
                                "<a href='javascript:void("+record.get('id')+");' class='alarm_detail'>删除</a>&nbsp;&nbsp;&nbsp;& nbsp;" +
                                "<a href='javascript:void("+record.get('id')+");' class='alarm_detail'>图表</a>&nbsp;&nbsp;&nbsp;& nbsp;" +
                                "<a href='javascript:void("+record.get('id')+");' class='alarm_detail'>曲线</a>&nbsp;&nbsp;&nbsp;& nbsp;" +
                                "</div>";
              return resultStr;
            }
        }
    ]);

 

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

 /**
	 * 点击操作：注意这个地方的作用域问题，因为<a href="#" onclick="dleUser()">
	 * 这里的onclick作用域是window
	 */
	window.delUser=function(userName){
		alert("开始删除"+userName);
	}
	
	/**
	 * 渲染器
	 */
	var opeartionRender=function(userName){
		return '<a href="#" onclick="delUser('+userName+')">删除</a>';
	}
	
	/**
	 * 数据列模型
	 */
	var cm=new Ext.grid.ColumnModel([
		sm,
		rowNum,
		{header: "姓名", dataIndex:'name',width: 100, sortable: true},
		{header: "年龄", dataIndex:'age',width: 50, sortable: true},
		{header: "工作", dataIndex:'work',width: 150, sortable: true},
		{header: "公司", dataIndex:'company',width: 100, sortable: true},
		{header: "所属行业", dataIndex:'industry',width: 80, sortable: true},
		{header: "群", dataIndex:'QQ',width:150, sortable: true},
	{header: "操作", dataIndex:'name',width:150, sortable: true,renderer:opeartionRender}
	]);

 

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

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

缺点是：这里面有个作用域的问题。因为做成链接这种形式，事件不是用Ext的实现来绑定的，而实际上使用了原生的事件，所以在点击之后的处理上稍微麻烦。

-- 这个缺点是不存在的...

实际上你里面是可以任意的标签,不一定是<a>, 这个标签只是为了在后面的事件处理里面找到对应的元素.

上次我给你看的这个,应该解释清楚了吧?

http://atian25.iteye.com/blog/414248
看5.4的方法1

使用渲染器renderer就够了，关于这个问题 

你可以监控girdpanel的store的load时间，然后对操作列进行遍历然后对该元素进行事件监控：

   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="#" class="[color=red]demoClass[/color]" 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. ]);  

store.on('load',function(parmas){
  Ext.select('a.demoClass').each(function(index,el){
    el.on('click',function(e){
    //your code like "window.delUser()"
});
});
});