使 ExtJS 4 网格内容可选择答案

【问题标题】：Making ExtJS 4 grid content selectable使 ExtJS 4 网格内容可选择
【发布时间】：2023-03-14 08:38:01
【问题描述】：

默认情况下，ExtJS 4 (Sencha) 中的网格不允许选择内容。但我想让这成为可能。

我试过这个网格配置：

viewConfig: {
    disableSelection: true,
    stripeRows: false,
    getRowClass: function(record, rowIndex, rowParams, store){
        return "x-selectable";
    }
},

使用这些 css 类（基本上针对我在 Chrome 中可以看到的每个元素）：

/* allow grid text selection in Firefox and WebKit based browsers */

.x-selectable,
.x-selectable * {
                -moz-user-select: text !important;
                -khtml-user-select: text !important;
    -webkit-user-select: text !important;
}

.x-grid-row td,
.x-grid-summary-row td,
.x-grid-cell-text,
.x-grid-hd-text,
.x-grid-hd,
.x-grid-row,

.x-grid-row,
.x-grid-cell,
.x-unselectable
{
    -moz-user-select: text !important;
    -khtml-user-select: text !important;
    -webkit-user-select: text !important;
}

我知道您可以在 Ext 3 中覆盖网格行模板，如下所示，但我不知道如何在 Ext 4 中执行相同操作：

templates: {
    cell: new Ext.Template(
    '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>',
           '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>',
    '</td>'
    )
}

非常感谢任何建议。

【问题讨论】：

标签： javascript extjs4 extjs

【解决方案1】：

您可以将 enableTextSelection: true 添加到您的 viewConfig 或将更改全局应用于每个网格：

Ext.override(Ext.grid.View, { enableTextSelection: true });

【讨论】：

我相信“enableTextSelection”仅从 4.1.0 开始可用。真的不知道是不是这样，但如果是这样，这就是要走的路。

【解决方案2】：

以最 Exty 的方式组合其中的几个答案....在创建网格时在网格视图中将 enableTextSelection 设置为 true。

var grid = new Ext.grid.GridPanel({
   viewConfig: {
      enableTextSelection: true
   },
});

【讨论】：

【解决方案3】：

你可以像这样添加它，使用列的渲染器

columns: [
    {
        header: "",
        dataIndex: "id",
        renderer: function (value, metaData, record, rowIndex, colIndex, store) {
            return this.self.tpl.applyTemplate(record.data);
        },
        flex: 1
    }
],
statics: {
    tpl: new Ext.XTemplate(
        '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>',
            '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>',
        '</td>')
}

【讨论】：

太棒了，谢谢。不过，我怀疑这表明我正在尝试将网格用于它不适合的用途 - 我使用网格纯粹是为了显示目的，而不是使用它的任何编辑功能。我最终只使用了一个带有 XTemplate 的面板，该面板呈现了一个平面简表。
@keeny 我知道这已经很老了，但我经常使用网格来实现仅显示功能。它们非常适合分类和样式

【解决方案4】：

我只想添加到 Triquis 的答案：使用 ExtJS 4.1.0，您还可以启用树形面板的选择：

Ext.override(Ext.view.Table, { enableTextSelection: true }); // Treepanels

Ext.override(Ext.grid.View,  { enableTextSelection: true }); // Grids

将此代码放在 Ext.onReady() 函数或应用程序的早期位置。

（抱歉，我无法对 Triqui 的答案发表评论，因为我还没有所需的声誉。）

【讨论】：

【解决方案5】：

另一种方法是在使用新的templatecolumn 时将类分配给任意html 元素。这是我刚刚在将应用程序移植到 extjs4 时编写的列定义中的单个列。

{   
    text: "Notes",
    dataIndex: 'notes',
    width: 300,    
    xtype: 'templatecolumn',  
    tpl: [
    '&lt;span class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}"',
    'style="{style}" tabIndex="0" {cellAttr}&gt;',
    '&lt;span class="x-grid3-cell-inner x-grid3-col-{id}" {attr}&gt;{notes}',
    '&lt;/span&gt;&lt;/span&gt;' ],
    editor: {xtype:'textfield'} 
}

【讨论】：

【解决方案6】：

对于不支持启用文本选择的旧版本 EXTJS。以下将通过为网格单元分配新模板来工作。这适用于 EXTJS 3.4.0

   var grid = new Ext.grid.GridPanel({
   viewConfig: {
      templates: {
         cell: new Ext.Template(
            '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id}\
                        x-selectable {css}" style="{style}"\
                        tabIndex="0" {cellAttr}>',\
            '<div class="x-grid3-cell-inner x-grid3-col-{id}"\
                        {attr}>{value}</div>',\
            '</td>'
         )
      }
   },
});

【讨论】：

【解决方案7】：

您可以使用这几行代码启用网格视图的选择，它在 EXTJS 3.4 中运行良好，具有 IE 11 和兼容模式

   if (!Ext.grid.GridView.prototype.templates) {
Ext.grid.GridView.prototype.templates = {};
}
Ext.grid.GridView.prototype.templates.cell = new Ext.Template(
'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>',
'<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>',
'</td>'
);

【讨论】：

【解决方案8】：

真值无效，请按如下方式使用：

用户可选：{ 正文元素：'文本' },

【讨论】：