ExtJS 6: Issue using multiple editors in a single grid column

Question

Notes

ExtJS version: 6.2.1.167

Fiddle: fiddle.sencha.com/#view/editor&fiddle/1tlt

This functionality worked in ExtJS 2.x and did not have any issues.

---

Goal

To have a grid (with a grouping feature and cell editing plugin) which can have multiple different editors (textfield and combos) in a single column.

The grid has reversed the traditional table system so that the field names and record values are displayed vertically. An example of the table header is shown here:

+-------------+-----------------+-----------------+-----------------
- Field Names - Record 1 Values - Record 2 Values - Editable Column
+-------------+-----------------+-----------------+-----------------

We cannot use the traditional system because there are hundreds of fields but only several records to compare.

---

Code

Here is the fiddle

Here is the main code which allows me to use multiple editors:

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

---

Issue

While my current code will successfully let you use multiple editors in a single column, it "randomly" throws errors. I say randomly because I have not been able to track down the actual cause of the errors.

Error #1 Unable to get property style of undefined or null reference

screenshot

Error #2 Unable to get property parentNode of undefined or null reference

screenshot

The cause of both of these errors is because the el property on the editor it is currently referencing has been destroyed, meaning there is no dom property.

---

How to Reproduce

This is part of the reason why I haven't been able to solve this. I haven't been able to find a concrete method of replicating the issue. Unfortunately the way I can get the errors is a random combination of clicking/tabbing into cells, entering data, switching to other cells, switching groups, etc... My current method that usually worked involves doing entering some random data and then furiously clicking to alternate focus between two neighboring cells. Most of the time it takes less than 30 seconds to get an error.

My current theory is that there is an event being fired which calls some function that, for whatever reason, destroys the editor's el property. I've tried looking at the value at the top of the error's call stacks and it appears that the el property is already destroyed at that point.

---

Bottom Line

I'm looking for suggestions on how to track down the actual cause of the issue.

---

Update

It turns out that this there is a bug revolving around using combos in cell editors at the moment. Here is another person with a very similar issue:

https://www.sencha.com/forum/showthread.php?330959-ExtJs-6-2-CellEditing-plugin-editor-el-dom-is-null

Here is the bug id: EXTJS-23330

According to Sencha Support, there currently is no workaround available and the bug is still open.

---

Update #2

This bug exists in 6.0.2 and 6.5.

Fortunately, I have found a way to more consistently reproduce the bug:

1. Hover over Group A for 5 seconds. Expand group A.
2. Hover over (Field 1, Value Column) for 5 seconds.
3. Click in (Field 1, Value Column).
4. Wait 5 seconds, then collapse Group A.
5. Wait 3 seconds, then hover over Group B header.
6. Wait 10 seconds, then hover over Group A header.
7. Wait 3 seconds, then expand Group A.
8. Hover over (Field 1, Value Column) field for 3 seconds.
9. Hover over (Field 1, Value 2 Column) for 3 seconds.
10. Click in (Field 1, Value 2 Column).

If the error does not occur (seemed to not happen yet in 6.5):

1. Wait 3 seconds, then click in (Field 1, Value Column).
2. Wait 1 second, then click in (Field 1, Value Column) again.

It isn't 100%, but is much more reliable than randomly clicking around.

Answer 1

It's hard to tell without a bit more context in the code and call stack, but if error #2 above is still a good exemplar of the issues at hand, you should be able to change the !editor.rendered check's else to read else if (!editor.destroyed), right above the breakpoint in the screenshot.

Answer 2

Its easy to use , you just need to override the editor class and place the editor as per your use case. Refer to my fiddle [https://fiddle.sencha.com/#fiddle/3jud&view/editor][1]