快捷導(dǎo)航

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

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

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

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

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

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

首先自定義一下樣式，來(lái)覆蓋默認(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)選擇文本的就是這個(gè)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(); 
} 
}); 

然后再自定義一個(gè)feature，啟用文本選擇功能，通過(guò)替換取消unselectable樣式，同時(shí)增加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)在可以聲明一個(gè)selectFeature了

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

需要啟用文本選擇的表格，在創(chuàng)建時(shí)添加這個(gè)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 
} 

您可能感興趣的文章: