javascript - sencha - extjs docs

Hacer seleccionable el contenido de cuadrícula ExtJS 4

Question

Las grillas en ExtJS 4 (Sencha) no permiten seleccionar contenido de manera predeterminada. Pero quiero hacer esto posible.

Probé esta configuración de grilla:

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

con estas clases de CSS (básicamente dirigidas a cada elemento que puedo ver en 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;
}

Sé que puede anular la plantilla de fila de grillas en Ext 3 como se muestra a continuación, pero no sé cómo hacer lo mismo en 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>''
    )
}

Cualquier sugerencia muy apreciada.

Answer 1

Combinando varias de estas respuestas de la manera Exty .... Establezca enableTextSelection en verdadero en la vista de la cuadrícula al crear la grilla.

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

Answer 2

Para la versión anterior de EXTJS que no es compatible con la selección de texto. A continuación, se trabajará asignando una nueva plantilla a la celda de la grilla. Esto funciona para 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 3

Puede agregar enableTextSelection: true a su viewConfig o aplicar el cambio globalmente para cada grilla con esto:

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

Answer 4

Puedes agregarlo así, usando el renderizador para la columna

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 5

Solo me gustaría añadir a la respuesta de Triquis: con ExtJS 4.1.0 también puede habilitar la selección de paneles de árbol:

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

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

Coloque este código en algún lugar al principio de su función Ext.onReady () o al principio de su aplicación.

(Lo siento, no puedo publicar un comentario sobre la respuesta de Triqui porque todavía no tengo la reputación requerida).

Answer 6

Una forma alternativa de hacerlo podría ser asignar las clases a elementos html arbitrarios al usar la nueva templatecolumn . Aquí hay una sola columna en la definición de una columna que acabo de escribir mientras transfiero una aplicación a 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''} 
}

Answer 7

puede habilitar la selección para la vista de cuadrícula con esas pocas líneas de código, funciona muy bien en EXTJS 3.4, con IE 11 y modo de compatibilidad

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