ExtJs的GridView中,表格里显示出来的内容默认是无法选择和复制的,找了半天也没找到在哪儿可配。
网上有一种解决方案:
First, you will need to add the following CSS in your main stylesheet.
1 | .x-grid-row ,.x-grid-cell, .x-unselectable, .x-unselectable * { |
2 | -webkit-user-select: text !important ; |
3 | -o-user-select: text !important ; |
4 | -khtml-user-select: all !important ; |
5 | -ms-user-select: text !important ; |
6 | user-select: text !important ; |
7 | -moz-user-select: text !important ; |
8 | } |
Next, just place the following code somewhere in the top of your application javascript file.
01 | if ( typeof Ext != 'undefined' ){ |
02 | Ext.core.Element.prototype.unselectable = function (){ return this ;}; |
03 | Ext.view.TableChunker.metaRowTpl = [ |
04 | '<tr class="' + Ext.baseCSSPrefix + 'grid-row {addlSelector} {[this.embedRowCls()]}" {[this.embedRowAttr()]}>' , |
05 | '<tpl for="columns">' , |
06 | '<td class="{cls} ' + Ext.baseCSSPrefix + 'grid-cell ' + Ext.baseCSSPrefix + 'grid-cell-{columnId} {{id}-modified} {{id}-tdCls} {[this.firstOrLastCls(xindex, xcount)]}" {{id}-tdAttr}><div class="' + Ext.baseCSSPrefix + 'grid-cell-inner ' + Ext.baseCSSPrefix + 'unselectable" style="{{id}-style}; text-align: {align};">{{id}}</div></td>' , |
07 | '</tpl>' , |
08 | '</tr>' |
09 | ]; |
10 | } |
应该可行,不过没试过。
换了一种比较暴力的方式去实现,修改extJs的源码,找到unselectable这个function,注释掉
me.swallowEvent("selectstart", true);
修改ext的css文件, 找到.x-grid-cell-inner,添加如下几行:
user-select: text; -webkit-user-select: text; -o-user-select: text; -ie-user-select: text; -moz-user-select: text; -ie-user-select: text;
现在表格里面的内容就可以被复制了。
更正:
其实只要在GridPanel的配置项中,加入这个配置就可以了:
viewConfig:{ enableTextSelection:true }
转自: http://shamrock.iteye.com/blog/1562446