ExtJS 6:在单个网格列中使用多个编辑器的问题

yiytaume  于 2022-09-26  发布在  其他
关注(0)|答案(2)|浏览(257)

注解

ExtJS版本:6.2.1.167
提琴:Fiddle.sencha.com/#view/editor&Fiddle/1tlt
此功能在ExtJS2.x中有效,没有任何问题。

目标

要拥有一个网格(具有分组功能和单元格编辑插件),该网格可以在单个列中具有多个不同的编辑器(textfield和e1d1es)。
网格与传统的表格系统相反,因此字段名和记录值垂直显示。表格标题示例如下所示:

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

我们不能使用传统的系统,因为有数百个字段,但只有几个记录可供比较。

代码

这是小提琴
以下是允许我使用多个编辑器的主要代码:

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

问题

虽然我当前的代码可以成功地让您在一列中使用多个编辑器,但它“随机”抛出错误。我随机说是因为我无法追踪错误的实际原因。

错误#1无法获取未定义或空引用的属性style

screenshot

错误#2无法获取未定义或空引用的属性parentNode

screenshot

这两个错误的原因都是因为它当前引用的编辑器上的el属性已被破坏,这意味着没有dom特性。

如何复制

这也是我无法解决这个问题的部分原因。我还没有找到复制这个问题的具体方法。不幸的是,我得到错误的方法是点击/跳格进入单元格、输入数据、切换到其他单元格、切换组等的随机组合。我目前常用的方法是输入一些随机数据,然后疯狂地点击以在两个相邻的单元格之间切换焦点。大多数情况下,获取错误所需的时间不到30秒。
我目前的理论是,有一个正在触发的事件调用某个函数,无论出于何种原因,该函数都会破坏编辑器的el属性。我已经尝试查看错误调用堆栈顶部的值,似乎el属性在该点已经被破坏。

底线

我正在寻找关于如何追踪问题的实际原因的建议。

更新

事实证明,目前在单元格编辑器中使用组合框存在一个错误。下面是另一个有着非常相似问题的人:
https://www.sencha.com/forum/showthread.php?330959-ExtJs-6-2-CellEditing-plugin-editor-el-dom-is-null
这是bug id:EXTJS-23330
据Sencha Support称,目前没有可用的解决方案,该漏洞仍然存在。

更新#2

此错误存在于6.0.2和6.5中。
幸运的是,我找到了一种方法,可以更加一致地重现该bug:
1.将鼠标悬停在A组上方5秒钟。展开组A。
1.将鼠标悬停在(字段1,值列)上方5秒钟。
1.单击in(字段1,值列)。
1.等待5秒钟,然后折叠组A。
1.等待3秒钟,然后将鼠标悬停在B组标题上。
1.等待10秒钟,然后将鼠标悬停在组A标题上。
1.等待3秒钟,然后展开组A。
1.将鼠标悬停在(字段1,值列)字段上3秒钟。
1.悬停在(字段1,值2列)上方3秒钟。
1.单击(字段1,值2列)。
如果错误没有发生(在6.5中似乎还没有发生):
1.等待3秒钟,然后单击(字段1,值列)。
1.等待1秒,然后再次单击(字段1,值列)。
它不是100%,但比随机点击要可靠得多。

pxyaymoc

pxyaymoc1#

如果代码和调用堆栈中没有更多的上下文,很难判断,但是如果上面的错误#2仍然是手头问题的一个很好的例子,那么您应该能够更改!编辑在屏幕截图中的断点正上方,渲染check的else以读取else if (!editor.destroyed)

lg40wkob

lg40wkob2#

它易于使用,您只需要覆盖编辑器类并根据您的用例放置编辑器。参考我的小提琴[https://fiddle.sencha.com/#fiddle/3jud&view/editor][1]

相关问题