使ExtJS 4网格内容可选

Question

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

任何建议非常感谢.

Answer 1

您可以将enableTextSelection:true添加到viewConfig中,或者为每个网格全局应用更改:

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

Answer 2

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

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

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