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

Related articles: