Remarques
Version ExtJS: 6.2.1.167ExtJS 6: Question à l'aide de plusieurs éditeurs en une seule colonne de la grille
Fiddle: fiddle.sencha.com/#view/editor & violon/1tlt
Cette fonctionnalité a fonctionné dans ExtJS 2.x et n'a rencontré aucun problème.
Objectif
Pour avoir une grille (avec un plugin fonctionnalité et l'édition des cellules de regroupement) qui peut avoir plusieurs éditeurs différents (textfield et combo s) dans une seule colonne.
La grille a inversé le système de table traditionnel afin que les noms de champ et les valeurs d'enregistrement soient affichés verticalement. Un exemple de l'en-tête de table est montrée ici:
+-------------+-----------------+-----------------+-----------------
- Field Names - Record 1 Values - Record 2 Values - Editable Column
+-------------+-----------------+-----------------+-----------------
Nous ne pouvons pas utiliser le système traditionnel, car il y a des centaines de champs, mais seulement plusieurs enregistrements à comparer.
code
Voici le code principal qui me permet d'utiliser plusieurs éditeurs:
Ext.define('MemberCellEditing', {
extend: 'Ext.grid.plugin.CellEditing',
xtype: 'membercellediting',
alias: 'plugin.membercellediting',
getCachedEditor: function(editorId, record, column) {
var me = this,
editors = me.editors,
dropDownName = record.get('dropDown');
// If dropdown field, use dropdown name as editor id
if (dropDownName && dropDownName != 'N') editorId = dropDownName;
// Attempt to get editor
var editor = editors.getByKey(editorId);
if (!editor) {
if (dropDownName && dropDownName != 'N') {
// Retrieve combo
var combo = DropDownManager.getCombo(editorId);
// Create editor with combo
editor = Ext.create('Ext.grid.CellEditor', {
editorId: editorId, // Each dropdown field will have its own combo
field: combo,
floating: true
});
} else {
// Use default editor configured for column
editor = column.getEditor(record);
}
if (!editor) {
return false;
}
// Allow them to specify a CellEditor in the Column
if (!(editor instanceof Ext.grid.CellEditor)) {
// Apply the field's editorCfg to the CellEditor config.
// See Editor#createColumnField. A Column's editor config may
// be used to specify the CellEditor config if it contains a field property.
editor = new Ext.grid.CellEditor(Ext.apply({
floating: true,
editorId: editorId,
field: editor
}, editor.editorCfg));
}
// Add the Editor as a floating child of the grid
// Prevent this field from being included in an Ext.form.Basic
// collection, if the grid happens to be used inside a form
editor.field.excludeForm = true;
// If the editor is new to this grid, then add it to the grid, and ensure it tells us about its life cycle.
if (editor.column !== column) {
editor.column = column;
column.on('removed', me.onColumnRemoved, me);
}
editors.add(editor);
}
// Inject an upward link to its owning grid even though it is not an added child.
editor.ownerCmp = me.grid.ownerGrid;
if (column.isTreeColumn) {
editor.isForTree = column.isTreeColumn;
editor.addCls(Ext.baseCSSPrefix + 'tree-cell-editor');
}
// Set the owning grid.
// This needs to be kept up to date because in a Lockable assembly, an editor
// needs to swap sides if the column is moved across.
editor.setGrid(me.grid);
// Keep upward pointer correct for each use - editors are shared between locking sides
editor.editingPlugin = me;
return editor;
}
});Problème
Alors que mon code actuel vous permettra d'utiliser avec succès plusieurs éditeurs dans une seule colonne, il « au hasard » renvoie des erreurs. Je dis au hasard parce que je n'ai pas été en mesure de traquer la cause réelle des erreurs.
Erreur # 1 Impossible d'obtenir la propriété style de référence non définie ou null
Erreur # 2 Impossible d'obtenir la propriété parentNode de référence non définie ou null
La cause de ces deux erreurs est parce que la propriété el sur l'éditeur, il fait référence à l'heure actuelle a été détruite, ce qui signifie qu'il n'y a pas la propriété dom.
Comment Reproduire
Cela fait partie de la raison pour laquelle je ne l'ai pas été en mesure de résoudre ce problème. Je n'ai pas réussi à trouver une méthode concrète pour reproduire le problème. Malheureusement, la façon dont je peux obtenir les erreurs est une combinaison aléatoire de cliquer/tabulation dans les cellules, entrer des données, passer à d'autres cellules, groupes de commutation, etc ... Ma méthode actuelle qui fonctionne habituellement consiste à entrer des données aléatoires et cliquer furieusement pour alterner le focus entre deux cellules voisines. La plupart du temps, il faut moins de 30 secondes pour obtenir une erreur.
Ma théorie actuelle est qu'il y a un événement qui est déclenché qui appelle une fonction qui, pour une raison quelconque, détruit la propriété el de l'éditeur. J'ai essayé d'examiner la valeur en haut des piles d'appels de l'erreur et il semble que la propriété el est déjà détruite à ce moment-là.
Bottom Line
Je cherche des suggestions sur la façon de traquer la cause réelle du problème.
Mise à jour
Il se trouve que cela, il y a un bug tournant autour de l'utilisation des combos dans les éditeurs de cellules au moment. Voici une autre personne avec un problème similaire:
Voici id bug: ExtJS-23330
Selon Sencha de soutien, il n'y a actuellement aucune solution disponible et le bug est toujours ouvert.
Mise à jour # 2
Ce bogue existe dans 6.0.2 et 6.5.
Heureusement, je l'ai trouvé un moyen de reproduire de manière plus cohérente le bug:
- Survoler groupe A pendant 5 secondes. Développez le groupe A.
- Passez la souris sur (champ 1, colonne de valeur) pendant 5 secondes.
- Cliquez sur (champ 1, colonne de valeur).
- Attendez 5 secondes, puis réduisez le groupe A.
- Attendez 3 secondes, puis passez la souris sur l'en-tête du groupe B.
- Attendez 10 secondes, puis passez la souris sur l'en-tête du groupe A.
- Attendez 3 secondes, puis développez le groupe A.
- Survolez le champ (champ 1, colonne de valeur) pendant 3 secondes. Passez la souris sur (champ 1, colonne 2) pendant 3 secondes.
- Cliquez sur (champ 1, colonne 2).
Si l'erreur ne se produit pas (semble pas se produire encore à 6,5):
- Attendez 3 secondes, puis cliquez sur (champ 1, colonne Valeur).
- Attendez 1 seconde, puis cliquez à nouveau sur (Champ 1, Colonne Valeur).
Ce n'est pas 100%, mais c'est beaucoup plus fiable qu'un clic aléatoire.