Unable to select text in resizable grid

Question

I need to have Ext.panel.Grids (v6.2.0) that are both resizable and allow users to select the cell values.

I have a bunch grids that I've set to be resizable with:

resizable: {
    pinned: true,
    handles: 's'
}

the problem now, even with overrides on the Table view...

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

... I can no longer select the text within the grids. If I remove the resizing the grids allow me to select the record values to copy and paste later.

I've tried overriding the column's enableTextSelection, too, but that still didn't work.

Answer 1

The the only way this seemed to work was to override Ext.resizer.Resizer's "constructor". I tried to just include the parts that needed to change, but I ended up using the whole constructor (https://docs.sencha.com/extjs/6.2.0/classic/src/Resizer.js.html) in my override and added the following at the end:

me.el.removeCls(unselectableCls)

and changed the following just to be safe:

handleEl = me[pos] = me.el.createChild({
    id: me.el.id + '-' + pos + '-handle',
    cls: Ext.String.format(handleCls, pos), //removed the unselectable class
    unselectable: 'off', //changed from 'on' to 'off'
    role: 'presentation'
});

something in here was forcing the unselectable class on the parent div of the grid and making the whole div's contents unselectable. I tried overriding it CSS, and overriding the Ext.column.Column and Ext.table.View and none of that worked.

Answer 2

II added this in the configuration of the grid:

viewConfig: {
    enableTextSelection: true,
    getRowClass: function () {
        return this.enableTextSelection ? "x-selectable" : ''; // bugfix for ExtJs 6.2.0
    }
},

This will allow to select the rows.