EXTJS7 implements click and drag to select text
- 2021-10-15 09:39:51
- OfStack
In this paper, we share the specific code of EXTJS7 to select text by clicking and dragging for your reference. The specific contents are as follows
By default, the user cannot select text on the interface by clicking and dragging
Solutions
Ext.Component Component can use the userSelectable Configuration item, set to ' text' You can click the text in this component
Note: If set to true Equivalent to setting styles user-select: auto; The selection is based on the browser default properties
{
xtype: 'grid',
userSelectable: 'text'
}
You can also pass in an object to set the style of child elements
userSelectable: {
element: true, // allow the element to be user selectable
bodyElement: true // allow the component's body element to be user selectable
}
Non-Ext. Component components can use the userCls configuration entry to add Ext. baseCSSPrefix + 'user-selectable-text' style classes
{
xtype: 'grid',
columns: [{
cell: { userCls: Ext.baseCSSPrefix + 'user-selectable-text' }
}]
}
Source code parsing
Ext.define('Ext.Component', {
// userSelectable Style class corresponding to each attribute value
userSelectableClsMap: {
true: Ext.baseCSSPrefix + 'user-selectable-auto',
false: Ext.baseCSSPrefix + 'user-selectable-none',
all: Ext.baseCSSPrefix + 'user-selectable-all',
auto: Ext.baseCSSPrefix + 'user-selectable-auto',
text: Ext.baseCSSPrefix + 'user-selectable-text',
none: Ext.baseCSSPrefix + 'user-selectable-none'
},
updateUserSelectable: function(newSelectable, oldSelectable) {
var me = this,
map = me.userSelectableClsMap,
el = me.el,
name, childEl;
if (typeof oldSelectable === 'boolean' || typeof oldSelectable === 'string') {
el.removeCls(map[oldSelectable]);
}
else {
for (name in oldSelectable) {
childEl = me[name];
//<debug>
if (!childEl || !childEl.isElement) {
Ext.raise('Element not found: "' + name + '"');
}
//</debug>
childEl.removeCls(map[oldSelectable[name]]);
}
}
if (typeof newSelectable === 'boolean' || typeof newSelectable === 'string') {
// If passed in as a Boolean or string, add the corresponding style class directly
el.addCls(map[newSelectable]);
}
else {
// If an object is passed in, style classes are added to the child elements according to the object attributes
for (name in newSelectable) {
childEl = me[name];
//<debug>
if (!childEl || !childEl.isElement) {
Ext.raise('Element not found: "' + name + '"');
}
//</debug>
childEl.addCls(map[newSelectable[name]]);
}
}
},
});