ExtJs4使GridView里面的数据可以选择复制
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.
view sourceprint?01if(typeof?Ext !=?'undefined'){02??Ext.core.Element.prototype.unselectable =?function(){returnthis;};03??Ext.view.TableChunker.metaRowTpl = [04???'<tr style="border: 0px !important; font-size: 1em !important; margin: 0px !important; padding: 0px !important; vertical-align: baseline !important; line-height: 1.1em !important; background-image: none !important; float: none !important; height: auto !important; width: auto !important; direction: ltr !important; display: inline !important;">+ Ext.baseCSSPrefix +?'grid-row {addlSelector} {[this.embedRowCls()]}" {[this.embedRowAttr()]}>',05????'<tpl for="columns">',06?????'<td style="border: 0px !important; font-size: 1em !important; margin: 0px !important; padding: 0px !important; vertical-align: baseline !important; line-height: 1.1em !important; background-image: none !important; float: none !important; height: auto !important; width: auto !important; direction: ltr !important; display: inline !important;">+ Ext.baseCSSPrefix +?'grid-cell '?+ Ext.baseCSSPrefix +?'grid-cell-{columnId} {{id}-modified} {{id}-tdCls} {[this.firstOrLastCls(xindex, xcount)]}" {{id}-tdAttr}><div style="border: 0px !important; font-size: 1em !important; margin: 0px !important; padding: 0px !important; vertical-align: baseline !important; line-height: 1.1em !important; background-image: none !important; float: none !important; height: auto !important; width: auto !important; direction: ltr !important; display: inline !important;">+ 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}?
?