Rendre le contenu de la grille ExtJS 4 sélectionnable
Les grilles dans ExtJS 4 (Sencha) ne permettent pas de sélectionner le contenu par défaut. Mais je tiens à rendre cela possible.
J'ai essayé cette configuration de grille:
viewConfig: {
disableSelection: true,
stripeRows: false,
getRowClass: function(record, rowIndex, rowParams, store){
return "x-selectable";
}
},
Avec ces classes css (ciblant essentiellement tous les éléments que je peux voir dans 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;
}
Je sais que vous pouvez remplacer le modèle de ligne de grille dans Ext 3 comme ci-dessous, mais je ne sais pas comment faire la même chose dans 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>'
)
}
Toutes les suggestions très appréciées.
7 réponses
Vous pouvez l'ajouter comme ceci, en utilisant le moteur de rendu pour la colonne
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>')
}
Vous pouvez ajouter enableTextSelection: true à votre viewConfig ou appliquer la modification globalement pour chaque grille avec ceci:
Ext.override(Ext.grid.View, { enableTextSelection: true });
Combinant plusieurs de ces réponses de la manière la plus Exty.... Définissez enableTextSelection sur true dans la vue de la grille lors de la création de la grille.
var grid = new Ext.grid.GridPanel({
viewConfig: {
enableTextSelection: true
},
});
Je voudrais juste ajouter à la réponse Triquis: Avec ExtJS 4.1.0, vous pouvez également activer la sélection pour treepanels:
Ext.override(Ext.view.Table, { enableTextSelection: true }); // Treepanels
Ext.override(Ext.grid.View, { enableTextSelection: true }); // Grids
Placez ce code quelque part au début de votre poste.fonction onReady() ou au début de votre application.
(Désolé, Je ne suis pas en mesure de poster un commentaire à la réponse de Triqui car je n'ai pas encore la réputation requise.)
Une autre façon de le faire pourrait être d'assigner les classes à des éléments HTML arbitraires tout en utilisant le Nouveau templatecolumn. Voici une seule colonne dans une définition de colonne que je viens d'écrire lors du portage d'une application sur 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'}
}
Pour les anciennes versions D'EXTJS qui ne prennent pas en charge la sélection de texte. La suite fonctionnera en assignant un nouveau modèle à la cellule de la grille. Cela fonctionne pour 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>'
)
}
},
});
Vous pouvez activer la sélection pour la vue grille avec ces quelques lignes de code , cela fonctionne très bien dans EXTJS 3.4, avec IE 11 et le mode de 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>'
);