Making ExtJS 4 grid content selectable

Combining several of these answers in the most Exty way.... Set enableTextSelection to true in the grid's view when creating the grid.

var grid = new Ext.grid.GridPanel({
   viewConfig: {
      enableTextSelection: true
   },
});

You can add it like this, using renderer for the column

columns: [
    {
        header: "",
        dataIndex: "id",
        renderer: function (value, metaData, record, rowIndex, colIndex, store) {
            return this.self.tpl.applyTemplate(record.data);
        },
        flex: 1
    }
],
statics: {
    tpl: new Ext.XTemplate(
        '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>',
            '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>',
        '</td>')
}

I just would like to add to Triquis answer: With ExtJS 4.1.0 you can enable the selection for treepanels as well:

Ext.override(Ext.view.Table, { enableTextSelection: true }); // Treepanels

Ext.override(Ext.grid.View,  { enableTextSelection: true }); // Grids

Place this code somewhere early in your Ext.onReady() function or early in your application.

(Sorry, I am not able to post a comment to the answer of Triqui as I don't have the required reputation yet.)


You can add enableTextSelection: true to your viewConfig or apply the change globally for every grid with this:

Ext.override(Ext.grid.View, { enableTextSelection: true });