技术积累 订阅所有技术积累的日志

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

作者:GDNPC 日期:2009-06-05

字体大小: 小 中 大

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的单元格可以选中了。




[本日志由 GDNPC 于 2009-06-05 09:27 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: javascript js extjs 技术
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
昵　称:
密　码: 游客发言不需要密码.
内　容:
验证码: 验证码
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.