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