ExtJs4使GridView裡面的資料可以選擇複製

yf.z發表於2015-01-06
JSView

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?
01 if(typeof Ext != 'undefined'){
02   Ext.core.Element.prototype.unselectable = function(){returnthis;};
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

相關文章