EXTJS7实现点击拖拉选择文本


Posted in Javascript onDecember 17, 2020

本文实例为大家分享了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]]);
   }
  }
 },
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
学习vue.js条件渲染
Dec 03 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 #Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 #Vue.js
Taro小程序自定义顶部导航栏功能的实现
Dec 17 #Javascript
vue 数据操作相关总结
Dec 17 #Vue.js
Vue 组件注册全解析
Dec 17 #Vue.js
js回到页面指定位置的三种方式
Dec 17 #Javascript
javascript 数组(list)添加/删除的实现
Dec 17 #Javascript
You might like
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
pandas 将索引值相加的方法
2018/11/15 Python
python操作gitlab API过程解析
2019/12/27 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
软件测试工程师笔试题带答案
2015/03/27 面试题
应用化学专业本科生求职信
2013/09/29 职场文书
会议室标语
2014/06/21 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
员工表扬信怎么写
2015/05/05 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
使用Apache Camel表达REST服务的方法
2022/06/10 Servers