现在的位置: 首页 > 综合 > 正文

ExtJs疑难杂症之GridPanel单元格不能选中复制问题

2013年07月01日 ⁄ 综合 ⁄ 共 860字 ⁄ 字号 评论关闭

Ext.grid.GridPanel有一个重大缺陷,就是单元格的内容不能选中,没法选中就没法复制,给用户带来很多不便。

分析:
用IE Developer Toolbar打开ExtJs输出的代码研究了一下,发现每个单元格的div都有一个属性:unselectable="on",看来是css在作怪。

版本:
2.2

解决办法:
extJs官方论坛上有具体的解决办法,比较可行的如下。

step1:添加新的css样式。

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>  

step2:修改Ext.grid.GridPanel的protoType,我是自己写了一个新的js文件,记得要在ext-all.js后面引入。

JavaScript代码
  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. );  

done!现在GridPanel的单元格可以选中了。

抱歉!评论已关闭.