ExtJs4.0 GridPanel 单元格、数据内容不能选中复制的解决办法。
在extjs2.0的Ext.grid.GridPanel单元格的内容不能选中,没法选中就没法复制,给用户带来很多不便。似乎也没提供属性配置。在网上找到的一些解决办法但不适用于ExtJs4.0。研究半天,覆盖了css,但只在非ie的浏览器有效。修改了extjs源码才解决了在ie的问题。
1、css代码:
<style type="text/css"> .x-grid-row { line-height:13px;vertical-align:top;padding:0 1px; -moz-user-select:text!important;-khtml-user-select:text!important;-webkit-user-select:text!important; } .x-grid-cell { overflow:hidden;font:normal 13px tahoma, arial, verdana, sans-serif;-moz-user-select:text!important;-khtml-user-select:text!important;-webkit-user-select:text!important; } .x-unselectable { -moz-user-select:text!important;-khtml-user-select:text!important;-webkit-user-select:text!important; } </style>
2、修改extjs4.0的ext-all.js(或ext-all-debug.js)三处代码:
找到
Ext.override(Ext.core.Element, { .... unselectable : function(){ var me = this; me.dom.unselectable = "on";//1、把me.dom.unselectable = "on"修改为me.dom.unselectable = "" me.swallowEvent("selectstart", true);//2、把ture改成false me.applyStyles("-moz-user-select:none;-khtml-user-select:none;"); me.addCls(Ext.baseCSSPrefix + 'unselectable'); return me; } ... });
找到
Ext.override(Ext.view.TableChunker, { ... metaRowTpl: [ '<tr class="' + Ext.baseCSSPrefix + 'grid-row {addlSelector} {[this.embedRowCls()]}" {[this.embedRowAttr()]}>', '<tpl for="columns">', '<td class="{cls} ' + Ext.baseCSSPrefix + 'grid-cell ' + Ext.baseCSSPrefix + 'grid-cell-{columnId} {{id}-modified} {{id}-tdCls} {[this.firstOrLastCls(xindex, xcount)]}" {{id}-tdAttr}><div unselectable="on" class="' + Ext.baseCSSPrefix + 'grid-cell-inner ' + Ext.baseCSSPrefix + 'unselectable" style="{{id}-style}; text-align: {align};">{{id}}</div></td>', '</tpl>', '</tr>' ]//3、把unselectable="on"改成unselectable="" ... });
这直接修改extjs4.0源代码不怎么友好,但本人extjs水平有限,还望大家提供方法修改。。
(以上在extjs4.0.2a测试通过)