• EXTJS7 实现点击拖拉选择文本


    版本

    7.4.0
    默认情况下,用户无法通过点击拖拉选择界面上的文本

    modern工具包

    1. 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
    }
    
    1. 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]]);
                }
            }
        },
    });
    

    classic工具包

    根据官方文档Ext.view.Table,Ext.grid.column.Column组件可以使用enableTextSelection配置项,设为true可启用文本选择。
    Ext.dom.Element对象可使用selectable方法启用文本选择。

    实际上grid column使用enableTextSelection并没有效果,正确方法如下

    {
    	xtype: 'grid',
    	viewConfig: {
    		enableTextSelection: true
    	},
    	column:[...]
    }
    
  • 相关阅读:
    C# QRCode、DataMatrix和其他条形码的生成和解码软件
    windows系统 安装MongoDB 32位
    ubuntu下创建c语言程序之hello world
    ueditor 添加微软雅黑字体 异常“从客户端中检测到有潜在危险的 request.form值”,解决
    asp.net ueditor 图片上传路径问题解决
    C# winform线程的使用 制作提醒休息小程序(长时间计算机工作者必备)
    jquery.qrcode和jqprint的联合使用,实现html生成二维码并打印(中文也ok)
    javascript陷阱之in语句
    谈谈Python的深拷贝和浅拷贝
    Flask开启多线程、多进程
  • 原文地址:https://www.cnblogs.com/luguojun/p/16132716.html
Copyright © 2020-2023  润新知