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 相关文章推荐
javascript import css实例代码
Jul 18 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
jquery实现页面加载效果
Feb 21 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
Vue常用的几个指令附完整案例
Nov 06 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实现文件下载功能的几个代码分享
2014/05/10 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
php利用header函数下载各种文件
2016/08/24 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
理解Javascript闭包
2013/11/01 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
使用async-validator编写Form组件的方法
2018/01/10 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
pandas去除重复列的实现方法
2019/01/29 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
美国时尚女装在线:Missguided
2016/12/03 全球购物
酒吧副总经理岗位职责
2013/12/10 职场文书
主题酒店策划书
2014/01/28 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
离婚起诉书范本
2015/05/18 职场文书
初一军训感言
2015/08/01 职场文书