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建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
学习php开源项目的源码指南
2014/12/21 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
node内置调试方法总结
2018/02/22 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
python 生成不重复的随机数的代码
2011/05/15 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
创新型城市实施方案
2014/03/06 职场文书
小学生安全演讲稿
2014/04/25 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
《叶问2》观后感
2015/06/15 职场文书
八年级物理教学反思
2016/02/19 职场文书
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers