ExtJS 4.2 网格视图配置 enableTextSelection答案

【问题标题】：ExtJS 4.2 grid viewconfig enableTextSelectionExtJS 4.2 网格视图配置 enableTextSelection
【发布时间】：2019-08-14 15:38:56
【问题描述】：

我有一个包含不同列并启用文本选择的网格：

viewConfig: {
    markDirty : false,
    enableTextSelection: true
},

一些列显示纯数据，如字符串，但其他列显示格式化数字：

header : '<span style="color:#C85E00;font-weight:bold;">COUNT</span>',
dataIndex : 'count',
itemId : '',
style : 'text-align:center;',
flex : 0.25,
align : 'right',
renderer : function (v, params, data, rowIndex, colIndex){
        return Ext.util.Format.number(v,'0.000 /i');
    }

在没有渲染器的列中，文本选择完美，但是当我尝试选择具有渲染器的列的文本时，出现奇怪的行为。我需要单击至少 3-4 次才能选择所有文本，但在没有渲染器的列中，双击一切正常。

我是否需要在带有渲染器的列中添加更多内容才能正确选择文本？？

【问题讨论】：

标签： extjs extjs4.2

【解决方案1】：

这似乎是您的渲染器放入数字的点的“问题”，而不是渲染器本身，这是您双击它以选择单词时的默认行为，因为您在文本中有一个点，它只会选择您双击的“单词”（在您的情况下，您的数字直到第一个点）

我认为您可以尝试使用 css 类更改此行为：user-select:all

像这样：

renderer : function (value, metaData){
        metaData.tdCls += 'YourCssClassWithUserSelectAll'
        return Ext.util.Format.number(v,'0.000 /i');
}

【讨论】：

我已经尝试过您的解决方案，但它不起作用，例如，如果带有渲染器的单元格包含数字 10（没有点），它会选择文本 10，但就像我加倍时一样单击它会重新渲染单元格并丢失选定的文本。但是此单元格不可编辑，它只有渲染器。

【解决方案2】：

可能的解决方案

搜索更多信息，我发现有一种网格列类型称为numbercolumn，使用它而不是使用渲染器，设置格式如下：

header : '<span style="color:#C85E00;font-weight:bold;">COUNT</span>',
dataIndex : 'count',
itemId : '',
style : 'text-align:center;',
flex : 0.25,
align : 'right',
xtype : 'numbercolumn',
format : '0.000 /i'

现在选择完美。

【讨论】：

【解决方案3】：

在带有渲染器的列中包含 editor 配置。然后selectOnFocus 属性将解决您的要求。像这样

header : '<span style="color:#C85E00;font-weight:bold;">COUNT</span>',
dataIndex : 'count',
itemId : '',
style : 'text-align:center;',
flex : 0.25,
align : 'right',
renderer : function (v, params, data, rowIndex, colIndex){
        return Ext.util.Format.number(v,'0.000 /i');
},
editor: { 
 selectOnFocus: true,
 readOnly: true,
 align : 'right',
}

【讨论】：