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.

Answer 1

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