EXTJS7实现点击拖拉选择文本

本文实例为大家分享了EXTJS7实现点击拖拉选择文本的具体代码，供大家参考，具体内容如下

默认情况下，用户无法通过点击拖拉选择界面上的文本

解决方案

Ext.Component组件可以使用userSelectable配置项，设置为‘text'，即可实现此组件中文本的点选
注意：如果设置为true，等效于设置样式 user-select: auto; ，将根据浏览器默认属性进行选择
{
 xtype: 'grid',
 userSelectable: 'text'
}

也可以传入对象设置子元素的样式

userSelectable: {
 element: true,  // allow the element to be user selectable
 bodyElement: true // allow the component's body element to be user selectable
}

非Ext.Component组件可以使用userCls配置项，添加 Ext.baseCSSPrefix + ‘user-selectable-text' 样式类

{
 xtype: 'grid',
 columns: [{
 cell: { userCls: Ext.baseCSSPrefix + 'user-selectable-text' }
 }]
}

源码解析

Ext.define('Ext.Component', {
 // userSelectable 各属性值对应的样式类
 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') {
   // 如果传入为布尔或字符串，直接添加对应的样式类
   el.addCls(map[newSelectable]);
  }
  else {
   // 如果传入的是对象，则根据对象属性分别给子元素添加样式类
   for (name in newSelectable) {
    childEl = me[name];

    //<debug>
    if (!childEl || !childEl.isElement) {
     Ext.raise('Element not found: "' + name + '"');
    }
    //</debug>

    childEl.addCls(map[newSelectable[name]]);
   }
  }
 },
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • extjs表格文本启用选择复制功能具体实现

    extjs提供了方便的表格组件grid供使用,但是默认情况下表格中的文本是不能被选中的,自然也是无法复制的. 而选择复制文本的需要也是很平常的,于是我们就需要自己动手来解决这个问题,实现extjs的grid文本选择复制功能. 说明一点,文中所列出的代码片断都是在当前ext 4.0.2a版本下的,其它版本未做测试,请自行斟酌. 首先自定义一下样式,来覆盖默认的css样式: 复制代码 代码如下: <style type="text/css"> .x-selectable, .x

  • 使用ExtJS技术实现的拖动树结点

    使用ExtJS技术实现的拖动树结点

    一.结点拖放的位置 拖放结点包含了两个动作,拖(drag)和放(drop).拖很好理解,就是将结点拖起来,拖哪一个结点的效果都是一样的.不过放结点就比较复杂了.放结点可分为如下两种情况: 追加(append)结点:如果将拖动的结点正好放在非叶子结点的上面,TreePanel组件会将这个结点移动到非叶子结点下面作为该结点的子结点.由于TreePanel的限制,叶子结点不能append. 在同一层做上下移动(above和below): 如果将拖动的结点放在叶子结点上,或放在非叶子结点的侧面,会将拖动

  • Extjs4实现两个GridPanel之间数据拖拽功能具体方法

    Extjs4实现两个GridPanel之间数据拖拽功能具体方法

    1.之前在winForm上有看过在选择数据时会将一些数据放在待选框中,而用户可以将想要选择的数据放到备选框中,那么如何用Extjs实现类似功能,我们选择用两个gridPanel来模拟其中的备选框和待选框.如下图所示: 定义代码如下: 复制代码 代码如下: {               xtype:'gridpanel',               multiSelect: true,                id:'staff',                 x: 5,      

  • Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例

    复制代码 代码如下: //只要要在treepanel中配置一下viewConfig即可,如果是两棵树之间,两棵树都要配置    viewConfig:{   plugins :{    ptype:'treeviewdragdrop',    appendOnly:true   //只能拖着带非叶节点上   },   listeners:{//监听器    drop:function(node,data,overModel,dropPosition,options){     //ajax的操作

  • ExtJS的拖拽效果示例

    复制代码 代码如下: <html> <head> <title>hello</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link rel="Stylesheet" type="text/css" href="http:10.19.1.55/lib

  • EXTJS7实现点击拖拉选择文本

    本文实例为大家分享了EXTJS7实现点击拖拉选择文本的具体代码,供大家参考,具体内容如下 默认情况下,用户无法通过点击拖拉选择界面上的文本 解决方案 Ext.Component组件可以使用userSelectable配置项,设置为'text',即可实现此组件中文本的点选 注意:如果设置为true,等效于设置样式 user-select: auto; ,将根据浏览器默认属性进行选择 { xtype: 'grid', userSelectable: 'text' } 也可以传入对象设置子元素的样式

  • js点击选择文本的方法

    本文实例讲述了js点击选择文本的方法.分享给大家供大家参考.具体实现方法如下: function selectText() { if (document.selection) { var range = document.body.createTextRange(); range.moveToElementText(document.getElementById('copy')); range.select(); } else if (window.getSelection) { var ran

  • JavaScript实现点击自动选择TextArea文本的方法

    本文实例讲述了JavaScript实现点击自动选择TextArea文本的方法.分享给大家供大家参考.具体实现方法如下: <textarea rows="10" cols="50" onclick="this.focus();this.select()" readonly="readonly"> example text </textarea> 希望本文所述对大家的javascript程序设计有所帮助.

  • js实现点击复制当前文本到剪贴板功能（兼容所有浏览器）

    js实现点击复制当前文本到剪贴板功能（兼容所有浏览器）

    最近做项目时,在网站框架搭建过程,有一个功能需要实现复制文本到剪贴板,相信这个功能很常用,但是对于不常写JS代码的我来说是一个比较大的挑战,回想以前做过的一个站点,使用window.clipboardData实现复制到剪贴板功能,也仅仅支持IE和FF浏览器,当时在百度找个几个方案,看不下去就放弃了,后来在代码中做了判断,如果不支持该属性,就直接alert:此功能不支持该浏览器,请手工复制文本框中内容.有没有人遇到同样情况? alert("此功能不支持该浏览器,请手工复制文本框中内容")

  • JS实现兼容各种浏览器的获取选择文本的方法【测试可用】

    JS实现兼容各种浏览器的获取选择文本的方法【测试可用】

    本文实例讲述了JS实现兼容各种浏览器的获取选择文本的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" con

  • JS获取及设置TextArea或input文本框选择文本位置的方法

    本文实例讲述了JS获取及设置TextArea或input文本框选择文本位置的方法.分享给大家供大家参考.具体实现方法如下: function getPos(el) { var range, textRange, duplicate el.focus() if ( el.selectionStart ) return el.selectionStart else if ( document.selection ) { // IE range = document.selection.createR

  • Android Studio EditText点击图标清除文本内容的实例解析

    Android Studio EditText点击图标清除文本内容的实例解析

    这篇文章是继自定义EditText样式之后的功能强化,对于实际应用项目有很大的参考意见,感兴趣的朋友可以移步上一篇,"Android Studion自定义EditText样式".具体清除EditText文本内容功能代码如下: package com.liheng; import android.content.Context; import android.graphics.Rect; import android.graphics.drawable.Drawable; import

  • 利用Javascript获取选择文本所在的句子详解

    前言 最近收到一个 issue期望能在划词的时候同时保存单词的上下文和来源网址.这个功能其实很久之前就想过,但感觉不好实现一直拖延没做.真做完发现其实并不复杂,完整代码在这里,或者继续往下阅读分析.话不多说了,来一起看看详细的介绍吧. 原理分析 获取选择文本 通过 window.getSelection() 即可获得一个 Selection 对象,再利用 .toString() 即可获得选择的文本. 锚节点与焦节点 在 Selection 对象中还保存了两个重要信息,anchorNode 和 f

  • JS实现移动端点击按钮复制文本内容

    移动端点击按钮复制文本内容,具体内容如下所示: <div> <p>邀请码</p> // <p id="inviteCode" class="inviteCode">{{invite_code}}</p> <input id="inviteCode" class="inviteCode" type="text" /> <p clas

  • Vue实现点击按钮复制文本内容的例子

    点击复制功能主要通过 clipboard.js 来实现 在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话,则复制不成功,使用步骤如下: 1.引入clipboard.js,方法如下: 第一种直接npm安装:npm install clipboard --save 第二种:<script src="js/clipboard.min.js"></script>(下载地址:https://clipboardjs.

随机推荐