Extjs table text enabled select copy function specific implementation

  • 2020-03-26 21:26:11
  • OfStack

Extjs provides a convenient grid of table components to use, but by default the text in the table cannot be selected and cannot be copied.

The need to choose to copy text is also very common, so we need to solve this problem by ourselves, to achieve the extjs grid text selection copy function.

To be clear, the code snippets listed in this article are under the current ext 4.0.2a release. Other versions have not been tested, so please use your own discretion.

Start with a custom style to override the default CSS style:
 
<style type="text/css"> 
.x-selectable, .x-selectable * { 
-moz-user-select: text!important; 
-khtml-user-select: text!important; 
} 
</style> 

Copy the extjs table class, which prevents the mouse from selecting text is the unselectable
 
 
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(); 
} 
}); 

Then you can customize a feature to enable text selection, remove the unselectable style by replacing it, and add the x-selectable style
 
 
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; 
}; 
} 
}); 

You can now declare a selectFeature

Var selectFeature = Ext create (' Myext. Grid. SelectFeature ');

To enable the table for text selection, add this feature at creation time
 
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 
} 

Related articles: