ExtJS表格文本选择复制功能的实现方法

先抛出一个常见问题：在使用 ExtJS 构建表格时，默认情况下表格内的文本处于“只可查看、无法选中”的状态，更不用说进行复制操作了。这一限制在实际业务场景中往往让用户感到不便——用户想要复制一段数据并粘贴到其他位置，却发现根本无法选中表格中的内容。为了解决这个问题，我们需要自行实现文本选中与复制功能。 需要特别说明的是，本文提供的代码片段已在 Ext 4.0.2a 版本中验证通过，其他版本可能存在细微差异，实际应用时建议根据自身环境适当调整。 第一步，先自定义样式，覆盖默认的 CSS 规则：

复制代码 代码如下:

接下来，我们需要重写 ExtJS 的 Table 类。导致文本无法选中的根本原因在于 `unselectable` 属性的设置，因此我们可以通过覆写 `Ext.view.Table` 的 `afterRender` 方法来干预这一行为：

复制代码 代码如下:

/**
* 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` 样式：

复制代码 代码如下:

/**
* 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;
};
}
});

现在，你可以直接声明一个 `selectFeature` 来使用了： var selectFeature = Ext.create('Myext.grid.SelectFeature'); 最后一步，对于需要启用文本复制功能的表格，在创建时将该 Feature 添加进去即可：

复制代码 代码如下:

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
}

至此，问题迎刃而解。以后遇到表格内文本无法复制的情况，直接套用此方案，用户就能像操作普通文本一样轻松选中并复制表格内容。归根结底，限制用户复制文本并无实际必要，不如主动放开限制，避免用户抱怨“为什么这个表格里的文字无法选中”。