首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

ExtJs4使GridView里边的数据可以选择复制

2012-07-16 
ExtJs4使GridView里面的数据可以选择复制ExtJs的GridView中,表格里显示出来的内容默认是无法选择和复制的,

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}

?

?

热点排行