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中创建实例与原型继承揭秘
Dec 21 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
使用p5.js临摹动态图片
Nov 04 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
原生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和ACCESS写聊天室(七)
2006/10/09 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
js获取内联样式的方法
2015/01/27 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
Python实现的批量下载RFC文档
2015/03/10 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
大学生工作推荐信范文
2013/12/02 职场文书
《春晓》教学反思
2014/04/20 职场文书
党员倡议书
2015/01/19 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
Python 键盘事件详解
2021/11/11 Python
HDFS免重启挂载新磁盘
2022/04/06 Servers