ExtJS table text enable the Select Replication feature to implement _extjs

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.

And the need to choose to copy text is also very common, so we need to solve this problem ourselves, to achieve ExtJS grid text Select Copy function.

Note that the text listed in the code snippets are in the current ext 4.0.2a version, the other version has not been tested, please discretion.

First customize the style to override the default CSS style:

Copy Code code as follows:

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

Replication ExtJS table class, which prevents the mouse from selecting text is this unselectable

Copy Code code 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, enable the text selection feature, replace the unselectable style with a replacement, and increase the x-selectable style

Copy Code code 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 ');

You need to enable the text selection table and add this feature at creation time.

Copy Code code as follows:

Ext.create (' Ext.grid.Panel ', {
title: ' Grid example ',
Store:gri Dstore,//define before
width:600,
height:300,
Features: [Selectfeature],
columns: [{
text: ' name ',
Dataindex: ' Name '
} '
//other code
}