Rendere selezionabile il contenuto della griglia ExtJS 4

Question

Le griglie in ExtJS 4 (Sencha) non consentono di selezionare il contenuto per impostazione predefinita. Ma voglio renderlo possibile.

Ho provato questo griglia config:

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

con queste classi CSS (sostanzialmente mira ogni elemento che posso vedere in 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; 
} 

So che è possibile ignorare la griglia modello di riga in Ext 3 come di seguito, ma non so come fare lo stesso in 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>' 
    ) 
} 

Qualsiasi su ggestions molto apprezzato.

Answer 1

È possibile aggiungere in questo modo, utilizzando renderer per la colonna

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 2

Un modo alternativo per farlo potrebbe essere quello di assegnare le classi di elementi HTML arbitrari mentre utilizzando il nuovo templatecolumn. Ecco una singola colonna in una definizione di colonna che ho appena scritto durante il porting di un'app su 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 3

È possibile aggiungere enableTextSelection: fedele alla tua viewConfig o applicare la modifica a livello globale per ogni griglia con questo:

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

Answer 4

Vorrei solo aggiungere alla Triquis risposta: Con ExtJS 4.1.0 è possibile abilitare la selezione per treepanels così:

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

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

inserire questo codice da qualche parte presto nella vostra funzione Ext.onReady() o all'inizio nell'applicazione.

(Mi dispiace, non sono in grado di inviare un commento alla risposta di triqui come io non ho la reputazione necessaria ancora.)

Answer 5

Per la versione precedente di ExtJS che doesnot supporto abilitare la selezione del testo. A seguire funzionerà assegnando un nuovo modello alla cella della griglia. Questo funziona per 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 6

La combinazione di alcune di queste risposte nel modo più Exty .... Impostare enableTextSelection al vero in vista della griglia durante la creazione della griglia.

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

Answer 7

è possibile abilitare la selezione per la visualizzazione griglia con quelle poche linee di codice, funziona molto bene in ExtJS 3.4, con IE 11 e la modalità di compatibilità

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