ExtJs的Ext.grid.GridPanel不能选择复制表格中的内容解决方案

今天遇到grid复制的问题,在网上找到了一个解决办法,只需改下CSS和JS,给大家分享一下: 本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/dy_paradise/archive/2010/01/19/5212389.aspx
Ext.grid.GridPanel有一个重大缺陷,就是单元格的内容不能选中,没法选中就没法复制,给用户带来很多不便。
分析:用IE Developer Toolbar打开ExtJs输出的代码研究了一下,发现每个单元格的div都有一个属性:unselectable="on",看来是css在作怪。
版本:2.2 (也适用v3+)
解决办法:extJs官方论坛上有具体的解决办法,比较可行的如下。
step1:添加新的css样式。

   
  1. <style type= "text/css" >         
  2.     .x-selectable, .x-selectable * {         
  3.         -moz-user-select: text! important ;         
  4.         -khtml-user-select: text! important ;         
  5.     }         
  6. </style>   
<style type= "text/css" >       
    .x-selectable, .x-selectable * {       
        -moz-user-select: text! important ;       
        -khtml-user-select: text! important ;       
    }       
</style> 
step2:修改Ext.grid.GridPanel的protoType,我是自己写了一个新的js文件,记得要在ext-all.js后面引入。
  1. if  (!Ext.grid.GridView.prototype.templates) {         
  2.     Ext.grid.GridView.prototype.templates = {};         
  3. }         
  4. Ext.grid.GridView.prototype.templates.cell =  new  Ext.Template(         
  5.      '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>' ,         
  6.      '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>' ,         
  7.      '</td>'         
  8. );   
if  (!Ext.grid.GridView.prototype.templates) {       
    Ext.grid.GridView.prototype.templates = {};       
}       
Ext.grid.GridView.prototype.templates.cell =  new  Ext.Template(       
     '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>' ,       
     '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>' ,       
     '</td>'       
); 
posted @ 2014-12-02 10:03  MaoSan-Jerry  阅读(1642)  评论(0编辑  收藏  举报