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 相关文章推荐
js实现文本框支持加减运算的方法
Aug 19 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 Javascript
Vue实现滑动拼图验证码功能
Sep 15 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 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
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
php计算整个目录大小的方法
2015/06/19 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
简洁的十分钟Python入门教程
2015/04/03 Python
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
介绍一下Linux中的链接
2016/05/28 面试题
《要下雨了》教学反思
2014/02/17 职场文书
主管会计岗位职责
2014/03/13 职场文书
搞笑爱情保证书
2014/04/29 职场文书
房地产广告策划方案
2014/05/15 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
家装业务员岗位职责
2015/04/03 职场文书