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实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 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下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
限制复选框的最大可选数
2006/07/01 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
详解python运行三种方式
2019/05/13 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
初入社会应届生求职信
2013/11/18 职场文书
文秘专业个人求职信
2013/12/22 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
社会工作专业求职信
2014/07/15 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
放牛班的春天观后感
2015/06/01 职场文书
赢在中国观后感
2015/06/02 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL