Возможность выбора содержимого сетки 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

Комбинирование нескольких из этих ответов наиболее подходящим способом .... Установите для 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>')
}

Answer 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, поскольку у меня пока нет необходимой репутации.)

Answer 5

Вы можете включить выбор для вида сетки с этими несколькими строками кода, это работает очень хорошо в 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>'
);

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

Answer 7

Альтернативным способом сделать это может быть присвоение классов произвольным элементам HTML при использовании нового templatecolumn.Вот один столбец в определении столбца, который я только что написал, портируя приложение на extjs4.

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