ExtJS 6: Problem 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 function worked in ExtJS 2.x and there were no problems.

<h / ">

purpose

To have a grid (with a grouping function and a cell editing plugin) that can have several different editors ( textfieldand combos) in one column.

The grid has changed the traditional table system so that field names and record values ​​are displayed vertically. An example 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 a few entries for comparison.

<h / ">

Code

Here is the fiddle

Here is the main code that allows me to use several 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 editorCfg to the CellEditor config.
        // See Editor#createColumnField. A Column 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;
  }
});

Run codeHide result

<h / ">

Question

, "" . , .

# 1 style undefined

# 2 parentNode undefined null reference

, el , , , dom.

</" >

, . . , - / , , , .. , , , . 30 .

, , , - el . , , el .

---

, .

---

Update

, , . :

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

: EXTJS-23330

Sencha Support, , .

---

# 2

6.0.2 6.5.

, :

• A 5 . A.
• ( 1, ) 5 .
• ( 1, ).
• 5 , A.
• 3 , B.
• 10 , A.
• 3 , A.
• ( 1, ) 3 .
• ( 1, 2 ) 3 .
• ( 1, 2 ).

(, 6.5):

• 3 , ( 1, ).
• 1 , ( 1, ) .

100%, , .

Answer 1

, , № 2 - , . editor.rendered else else if (!editor.destroyed), .