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