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中将函数赋值给变量的调用方法
Mar 23 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
js实现经典贪吃蛇小游戏
Mar 19 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 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
php通过COM类调用组件的实现代码
2012/01/11 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
python 控制语句
2011/11/03 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
python 读写中文json的实例详解
2017/10/29 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
Python用for循环实现九九乘法表
2018/05/31 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
Python subprocess库的使用详解
2018/10/26 Python
机器学习实战之knn算法pandas
2019/06/22 Python
python palywright库基本使用
2021/01/21 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
锦旗标语大全
2014/06/23 职场文书
幼儿生日活动方案
2014/08/27 职场文书
上课不认真检讨书
2014/09/17 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
小英雄雨来观后感
2015/06/09 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
Django程序的优化技巧
2021/04/29 Python
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫