如何在ExtJS 7 - Modern中实现手指选中复制文本功能？

ExtJS 7 Modern 版本默认基于移动端交互优先的设计，禁用了文本选择功能，以下是几种可行的解决办法：

全局范围启用文本选择 #

如果希望整个应用内的文本都能被选中复制，可通过两种方式修改默认配置：

方式1：在Viewport配置中直接设置 #

Ext.create('Ext.Viewport', {
    layout: 'fit',
    style: {
        userSelect: 'text',
        '-webkit-user-select': 'text' // 兼容iOS/Android WebView
    },
    items: [/* 你的应用组件 */]
});

方式2：全局CSS覆盖默认样式 #

在项目样式文件中添加：

.x-viewport, .x-container, .x-panel {
    -webkit-user-select: text !important;
    user-select: text !important;
}

单个组件针对性启用 #

若仅需特定组件支持文本选择，直接给目标组件添加样式或自定义类即可：

方式1：组件内直接配置style #

Ext.create('Ext.Panel', {
    html: '这段文本可以被手指选中复制',
    style: {
        userSelect: 'text',
        '-webkit-user-select': 'text'
    }
});

方式2：自定义CSS类复用 #

先在样式文件中定义可选中类：

.selectable-content {
    -webkit-user-select: text;
    user-select: text;
}

再在组件配置中引用该类：

Ext.create('Ext.Label', {
    text: '可选中的标签文本',
    cls: 'selectable-content'
});

特殊组件处理（Grid/DataView） #

对于列表、表格类组件，默认行/单元格为可点击状态，需单独配置单元格或项的样式：

Grid组件示例 #

Ext.create('Ext.grid.Grid', {
    columns: [{
        text: '内容列',
        dataIndex: 'content',
        cell: {
            style: {
                userSelect: 'text',
                '-webkit-user-select': 'text'
            }
        }
    }],
    store: /* 你的数据源Store */
});

DataView组件示例 #

Ext.create('Ext.dataview.DataView', {
    itemConfig: {
        style: {
            userSelect: 'text',
            '-webkit-user-select': 'text'
        }
    },
    store: /* 你的数据源Store */
});

注意事项 #

• 不要给按钮、工具栏等核心交互组件开启文本选择，避免影响正常操作逻辑
• 移动端必须添加-webkit-user-select前缀，确保iOS和Android设备的兼容性

内容的提问来源于stack exchange，提问作者webpuper