Ext.grid.GridPanel有一个重大缺陷,就是单元格的内容不能选中,没法选中就没法复制,给用户带来很多不便。
分析:
用IE Developer Toolbar打开ExtJs输出的代码研究了一下,发现每个单元格的div都有一个属性:unselectable="on",看来是css在作怪。
版本:
2.2
解决办法:
extJs官方论坛上有具体的解决办法,比较可行的如下。
step1:添加新的css样式。
CSS代码
- <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后面引入。
JavaScript代码
- 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>'
- );
done!现在GridPanel的单元格可以选中了。