Making ExtJS 4 grid content selectable

Question

Grids in ExtJS 4 (Sencha) don’t allow to select content by default. But I want to make this possible.

I've tried this grid config:

viewConfig: {
    disableSelection: true,
    stripeRows: false,
    getRowClass: function(record, rowIndex, rowParams, store){
        return "x-selectable";
    }
},

with these css classes (basically targeting every element I can see in Chrome):

/* allow grid text selection in Firefox and WebKit based browsers */

.x-selectable,
.x-selectable * {
                -moz-user-select: text !important;
                -khtml-user-select: text !important;
    -webkit-user-select: text !important;
}

.x-grid-row td,
.x-grid-summary-row td,
.x-grid-cell-text,
.x-grid-hd-text,
.x-grid-hd,
.x-grid-row,

.x-grid-row,
.x-grid-cell,
.x-unselectable
{
    -moz-user-select: text !important;
    -khtml-user-select: text !important;
    -webkit-user-select: text !important;
}

I know that you can override the grid row template in Ext 3 as below, but I don't know how to do the same in Ext 4:

templates: {
    cell: new Ext.Template(
    '<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>'
    )
}

Any suggestions much appreciated.

score 53 · Answer 1 · answered Aug 10 '12 at 11:25

53

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

answered Aug 10 '12 at 11:25

Triqui

721
6
3

I believe "enableTextSelection" is only available since 4.1.0. Don't really know if it is the case, but if so, this is the way to go. – MJC Oct 29 '12 at 03:01

score 24 · Answer 2 · answered Mar 31 '14 at 22:51

24

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
   },
});

answered Mar 31 '14 at 22:51

ben.rally

497
3
4

score 4 · Accepted Answer · edited Oct 18 '13 at 17:44

4

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>')
}

edited Oct 18 '13 at 17:44

Sumner Evans

8,951
5
30
47

answered Sep 02 '11 at 08:12

nscrob

4,483
1
20
24

Awesome, thanks. I suspect though, that this is an indication I'm trying to use a grid for something it's not meant for - I was using a grid purely for display purposes & not using any of it's editing features. I ended up just using a panel with an XTemplate that rendered out a plane-jane table. – Barry Sep 03 '11 at 06:20
@keeny I know this is really old, but I often use grids for display only functionality. They're great for sorting and style – WattsInABox Apr 01 '13 at 17:37

score 3 · Answer 4 · answered Oct 02 '13 at 13:40

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.)

score 0 · Answer 5 · answered Oct 16 '13 at 17:46

For older version of EXTJS that doesnot support enable text selection. Following will work by assigning a new template to the grid cell. This works for EXTJS 3.4.0

   var grid = new Ext.grid.GridPanel({
   viewConfig: {
      templates: {
         cell: new Ext.Template(
            '<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>'
         )
      }
   },
});

score 0 · Answer 6 · answered Feb 08 '16 at 12:05

you can enable the selection for grid view with those few lines of code , it works very well in EXTJS 3.4 , with IE 11 and compatibility mode

   if (!Ext.grid.GridView.prototype.templates) {
Ext.grid.GridView.prototype.templates = {};
}
Ext.grid.GridView.prototype.templates.cell = new Ext.Template(
'<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>'
);

score 0 · Answer 7 · answered Jul 23 '19 at 18:08

0

Value true is not working, Please use as following :

userSelectable: { bodyElement: 'text' },

answered Jul 23 '19 at 18:08

Ravi Kumar

71
1
8

score 0 · Answer 8 · edited Oct 29 '12 at 02:55

An alternate way to do it might be to assign the classes to arbitrary html elements while using the new templatecolumn. Here's a single column in a column definition I just wrote while porting an app to extjs4.

{   
    text: "Notes",
    dataIndex: 'notes',
    width: 300,    
    xtype: 'templatecolumn',  
    tpl: [
    '&lt;span class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}"',
    'style="{style}" tabIndex="0" {cellAttr}&gt;',
    '&lt;span class="x-grid3-cell-inner x-grid3-col-{id}" {attr}&gt;{notes}',
    '&lt;/span&gt;&lt;/span&gt;' ],
    editor: {xtype:'textfield'} 
}

Making ExtJS 4 grid content selectable

8 Answers8