EXTJS GridPanel 右键复制当前选中单元格

EXTJS中复制Grid中当前单元格的内容是一个比较常见的需求，最常见的解决方法就是添加新的css样式，具体可以参考：http://blog.youkuaiyun.com/dy_paradise/article/details/5212389 

       其实呢不用这么麻烦的，EXTJS API其实提供了相应的事件让开发者可以通过添加监听事件来到达选中当前单元格并取得当前单元格的内容。下面以右击为例(左键单击相同)，具体的实现功能是右键点击当前单元格选中当前单元格并弹出右键菜单，右键菜单有复制、修改和删除3个常见功能，具体效果如下：

1、首先实现一个右键菜单(gridpanel实现略过)

[javascript] view plain copy

1. var rightMenu = new Ext.menu.Menu( {  
2.     id : 'rightClickCont',  
3.     items : [{  
4.         id:'rMenu1',  
5.         text:'复 制',  
6.         icon:'../img/icon/copy.png',  
7.         handler:copy  
8.         },{  
9.         id:'rMenu2',  
10.         text:'修 改',  
11.         icon:'../img/icon/modify.png',  
12.         handler:modify  
13.         }, {  
14.         id:'rMenu3',  
15.         text:'删 除',  
16.         icon:'../img/icon/clear.png',  
17.         handler:del  
18.         }]  
19. });  

2、为gird添加监听事件(注意：下面语句写在Ext.onReady(function(){}中)

[javascript] view plain copy

1. //右击行触发事件  
2. gridPanel.addListener('rowcontextmenu', rightClickFn);  

        这里的'rowcontextmenu'即右击行(row)时触发，使用这个事件的目的是为了取得当前行的主键，以便实现修改和删除功能，若只是纯粹想实现右键复制的功能可以不用添加这个事件，后文介绍。

3、实现监听事件的函数rightClickFn

[javascript] view plain copy

1. function rightClickFn(gridPanel, rowIndex, e) {  
2.     e.preventDefault();  
3.     rightMenu.showAt(e.getXY());  
4.     //gridpanel默认右击是不会选择当前行的，所以必须添加这句代码  
5.     gridPanel.getSelectionModel().selectRow(rowIndex);  
6. }  

4、实现删除和修改功能

     这里可以根据以下代码取得当前行的数据：

[javascript] view plain copy

1. var record = gridPanel.getSelectionModel().getSelected();  

   功能的具体实现不是本文的在重点，请按照需求自己实现。但是这里可以给你一个简单的修改功能的模块供大家参考：

[javascript] view plain copy

1. function modify(rowIndex) {  
2.     var record = gridPanel.getSelectionModel().getSelected();  
3.     //以下代码为点击修改后带出该条记录信息  
4.     Ext.getCmp("title").setValue(record.get("title"));  
5.     if(record == undefined) {  
6.         Ext.Msg.alert('提示信息','未选择任何数据！');  
7.     }  
8.     else {  
9.         var win = new Register.MicWin({  
10.             title:"修改文章",  
11.             buttons:[{  
12.                  text:"确 定",  
13.                  handler:function() {  
14.                      Ext.Ajax.request({  
15.                          url:'article!updateArticle.action',  
16.                          params:{  
17.                             //传递参数  
18.                          },  
19.                          success:function(request){  
20.                             Ext.Msg.alert('提示信息','文章修改成功！');  
21.                             win.close();  
22.                             store.reload();  
23.                         },    
24.                         failure:function(){  
25.                             Ext.Msg.alert('错误信息','系统错误');  
26.                         }    
27.                     })  
28.                  }                  
29.                  },{  
30.                     text:"取 消",  
31.                     handler:function(){//点击时触发的事件      
32.                         win.close();      
33.                     }  
34.                  }]  
35.         });  
36.         win.show();  
37.     }  
38. }  

5、为grid添加监听单元格事件：

[javascript] view plain copy

1. gridPanel.addListener('cellcontextmenu',cellclick);  

        这里的'cellcontextmenu'即右击单元格(cell)时触发，然后实现cellclick函数。注意这里的cellclick()函数与上文中rightClickFn()函数的参数，可以看到这里的参数多了一个columnIndex，根据columnIndex来定位单元格的位置。根据以下代码可以取得当前单元格的值。

[javascript] view plain copy

1. //获取选中行选中列的值    
2. function cellclick(grid, rowIndex, columnIndex, e) {     
3.     var record = grid.getStore().getAt(rowIndex);  
4.     var fieldName = grid.getColumnModel().getDataIndex(columnIndex);  
5.        //info为一个全局变量   
6.     info = record.get(fieldName);  
7. }  

6、实现复制功能

[javascript] view plain copy

1. function copy() {  
2.     var record = gridPanel.getSelectionModel().getSelected();  
3.     if(record == undefined) {  
4.         Ext.Msg.alert('提示信息','未选择任何数据！');  
5.     }  
6.     else {  
7.         copyToClipboard(info);  
8.      }  
9. }  

        到这里所有的功能基本上就全部实现了，不用添加新的css也可以解决这个问题，copyToClipboard方法的代码为网上拷贝，具体实现下面给出有具体代码，大家可以参考。

[javascript] view plain copy

1. function copyToClipboard(txt) {    
2.      if(window.clipboardData) {     
3.              window.clipboardData.clearData();     
4.              window.clipboardData.setData("Text", txt);     
5.      } else if(navigator.userAgent.indexOf("Opera") != -1) {     
6.           window.location = txt;     
7.      } else if (window.netscape) {     
8.           try {     
9.                netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");     
10.           } catch (e) {     
11.                alert("被浏览器拒绝！\n请在浏览器地址栏输入'about:config'并回车\n然后将'signed.applets.codebase_principal_support'设置为'true'");     
12.           }     
13.           var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);     
14.           if (!clip)     
15.                return;     
16.           var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);     
17.           if (!trans)     
18.                return;     
19.           trans.addDataFlavor('text/unicode');     
20.           var str = new Object();     
21.           var len = new Object();     
22.           var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);     
23.           var copytext = txt;     
24.           str.data = copytext;     
25.           trans.setTransferData("text/unicode",str,copytext.length*2);     
26.           var clipid = Components.interfaces.nsIClipboard;     
27.           if (!clip)     
28.                return false;     
29.           clip.setData(trans,null,clipid.kGlobalClipboard);     
30.      }     
31. }   
    

本文转自：http://blog.youkuaiyun.com/csc0211/article/details/7611876