Specific implementation of extjs table text enable selection copy function

Specific implementation of extjs table text enable selection copy function_extjs

WBOY

Release： 2016-05-16 17:20:12

Original

1396 people have browsed it

extjs provides a convenient table component grid for use, but by default the text in the table cannot be selected, and naturally cannot be copied.

The need to select and copy text is also very common, so we need to solve this problem ourselves and implement the grid text selection and copy function of extjs.

Please note that the code snippets listed in this article are all under the current ext 4.0.2a version. Other versions have not been tested, so please consider at your own discretion.

First customize the style to override the default css style:

Copy the code The code is as follows:

Override the table class of extjs. What prevents the mouse from selecting text is this unselectable

Copy code The code is as follows:

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

Then customize a feature to enable text selection Function, cancel the unselectable style by replacing it, and add the x-selectable style

Copy the code The code is as follows:

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

Now you can declare a selectFeature

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

For tables that need to enable text selection, just add this feature when creating

Copy the code The code is as follows:

 
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 
} 