快捷導(dǎo)航

extjs表格文本啟用選擇復(fù)制功能具體實現(xiàn)

更新時間：2013年10月11日 17:54:27 作者：

extjs提供了方便的表格組件grid供使用，但是默認(rèn)情況下表格中的文本是不能被選中的，自然也是無法復(fù)制的，下面就為大家介紹下選擇復(fù)制功能如何啟用，感興趣的朋友可以了解下

extjs提供了方便的表格組件grid供使用，但是默認(rèn)情況下表格中的文本是不能被選中的，自然也是無法復(fù)制的。

而選擇復(fù)制文本的需要也是很平常的，于是我們就需要自己動手來解決這個問題，實現(xiàn)extjs的grid文本選擇復(fù)制功能。

說明一點，文中所列出的代碼片斷都是在當(dāng)前ext 4.0.2a版本下的，其它版本未做測試，請自行斟酌。

首先自定義一下樣式，來覆蓋默認(rèn)的css樣式：

復(fù)制代碼代碼如下:

 
<style type="text/css"> 
.x-selectable, .x-selectable * { 
-moz-user-select: text!important; 
-khtml-user-select: text!important; 
} 
</style> 

復(fù)寫extjs的table類，阻止鼠標(biāo)選擇文本的就是這個unselectable

復(fù)制代碼代碼如下:

 
/** 
* override the table class 
*/ 
Ext.override(Ext.view.Table, { 
afterRender : function() { 
var me = this; 
me.callParent(); 
me.mon(me.el, { 
scroll : me.fireBodyScroll, 
scope : me 
}); 
if (!me.featuresMC && (me.featuresMC.findIndex('ftype', 'unselectable') >= 0)) { 
me.el.unselectable(); 
} 
me.attachEventsForFeatures(); 
} 
}); 

然后再自定義一個feature，啟用文本選擇功能，通過替換取消unselectable樣式，同時增加x-selectable樣式

復(fù)制代碼代碼如下:

 
/** 
* define the select feature 
*/ 
Ext.define('Myext.grid.SelectFeature', { 
extend : 'Ext.grid.feature.Feature', 
alias : 'feature.selectable', 
mutateMetaRowTpl : function(metaRowTpl) { 
var i, ln = metaRowTpl.length; 
for (i = 0; i < ln; i++) { 
tpl = metaRowTpl[i]; 
tpl = tpl.replace(/x-grid-row/, 'x-grid-row x-selectable'); 
tpl = tpl.replace(/x-grid-cell-inner x-unselectable/g, 'x-grid-cell-inner'); 
tpl = tpl.replace(/unselectable="on"/g, ''); 
metaRowTpl[i] = tpl; 
}; 
} 
}); 

現(xiàn)在可以聲明一個selectFeature了

var selectFeature = Ext.create('Myext.grid.SelectFeature');

需要啟用文本選擇的表格，在創(chuàng)建時添加這個feature就可以了

復(fù)制代碼代碼如下:

 
Ext.create('Ext.grid.Panel', { 
title : 'grid example', 
store : gridStore, // define before 
width : 600, 
height : 300, 
features : [selectFeature], 
columns : [{ 
text:'name', 
dataIndex:'name' 
}] 
// other code 
} 

您可能感興趣的文章: