ExtJS 4.2 网格视图配置启用文本选择

Question

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

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');
    }

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

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

Answer 1

这似乎是一个 "problem"，带有您的渲染器在数字中放置的点，而不是渲染器本身，当您双击它时的默认行为 select 这个词，因为你在文本中有一个点，它只会 select 你双击的 "word" （在你的情况下，你的数字直到第一个点）

我认为您可以尝试使用 css class 来改变这种行为：user-select:all

像这样：

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

Answer 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'

选择现在完美无缺。

Answer 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',
}

ExtJS 4.2 网格视图配置启用文本选择

ExtJS 4.2 grid viewconfig enableTextSelection

extjs

extjs4.2