ExtJs - 对列进行排序后使用 CellEditor 的 GridPanel 中的错误

Question

使用 ExtJs 5.1.0、Chrome 44.0+ 看到

我遇到一个间歇性问题，当使用 CellEditor 修改网格面板的内容时，在对其中一列进行排序后尝试编辑单元格时会引发错误。

这是堆栈跟踪：

Uncaught TypeError: Cannot read property 'parentNode' of nullExt.define.onShow @ CellEditor.js?ver=911111541:147
Ext.define.show @ Component.js?ver=911111541:5104
Ext.define.startEdit @ Editor.js?ver=911111541:333
Ext.Base.Base.addMembers.callParent @ Base.js?ver=911111541:1255
Ext.define.startEdit @ CellEditor.js?ver=911111541:132
Ext.define.showEditor @ CellEditing.js?ver=911111541:536
Ext.define.startEdit @ CellEditing.js?ver=911111541:479
Ext.define.onCellClick @ Editing.js?ver=911111541:446
fire @ Event.js?ver=911111541:387
doFireEvent @ Observable.js?ver=911111541:654
prototype.doFireEvent @ EventDomain.js?ver=911111541:293
fireEventArgs @ Observable.js?ver=911111541:587
fireEvent @ Observable.js?ver=911111541:540
Ext.define.processItemEvent @ Table.js?ver=911111541:2445
Ext.define.processUIEvent @ View.js?ver=911111541:619
Ext.define.handleEvent @ View.js?ver=911111541:562
fire @ Event.js?ver=911111541:387
Ext.define.fire @ Dom.js?ver=911111541:367
Ext.define.publish @ Dom.js?ver=911111541:339
Ext.define.doDelegatedEvent @ Dom.js?ver=911111541:398
Ext.define.onDelegatedEvent @ Dom.js?ver=911111541:379
(anonymous function) @ Function.js?ver=911111541:145

CellEditor 的 onShow 方法中的相关代码：

if (me.el.dom.parentNode !== me.renderTo) {
    me.renderTo.appendChild(me.el.dom);
}

网格本身是空的。它有一个与之关联的工具栏，其中包含允许您添加/复制/删除行的按钮。

这是一个代表此设置的小提琴（但是无法在小提琴中重现）：

https://fiddle.sencha.com/#fiddle/top

重现的步骤大致如下：

In Chrome 44.0 (Not seen in other browsers)

1) Add a new row, fill in the fields
2) Sort on field2
3) Add three new rows
4) Add a value to one of the new rows under column for field 2
5) Sort on field2
6) Try to edit a cell in the field2 column

此时，大约有 10% 的时间会出现错误并破坏网格。如果在第 6 步问题没有重现，您可以导航到浏览器中的另一个选项卡，等待几分钟，返回网格并尝试对其进行编辑，问题就会发生。这接近 100% 的繁殖率。

请注意，这些步骤并不准确。例如，您可以改用第一列来尝试此操作。或者添加一些任意数量的行。您使用网格并尝试对其进行排序的时间越长，您看到错误的机会就越高。

如果您看到错误然后尝试再次编辑网格中的任何单元格，您将收到此错误：

Uncaught TypeError: Cannot read property 'style' of nullExt.define.setSize @ CompositeElementLite.js?ver=911111541:1674
Ext.define.setSize @ Component.js?ver=911111541:4922
Ext.define.setWidth @ Component.js?ver=911111541:5033
Ext.define.realign @ CellEditor.js?ver=911111541:282
Ext.define.startEdit @ Editor.js?ver=911111541:334
Ext.Base.Base.addMembers.callParent @ Base.js?ver=911111541:1255
Ext.define.startEdit @ CellEditor.js?ver=911111541:132
Ext.define.showEditor @ CellEditing.js?ver=911111541:536
Ext.define.startEdit @ CellEditing.js?ver=911111541:479
Ext.define.onCellClick @ Editing.js?ver=911111541:446
fire @ Event.js?ver=911111541:387
doFireEvent @ Observable.js?ver=911111541:654
prototype.doFireEvent @ EventDomain.js?ver=911111541:293
fireEventArgs @ Observable.js?ver=911111541:587
fireEvent @ Observable.js?ver=911111541:540
Ext.define.processItemEvent @ Table.js?ver=911111541:2445
Ext.define.processUIEvent @ View.js?ver=911111541:619
Ext.define.handleEvent @ View.js?ver=911111541:562
fire @ Event.js?ver=911111541:387
Ext.define.fire @ Dom.js?ver=911111541:367
Ext.define.publish @ Dom.js?ver=911111541:339
Ext.define.doDelegatedEvent @ Dom.js?ver=911111541:398
Ext.define.onDelegatedEvent @ Dom.js?ver=911111541:379(anonymous function) @ Function.js?ver=911111541:145

这是我的一些代码，可能相关也可能不相关：

在initComponent函数中，我先创建了cellediting插件：

this._cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
  clicksToEdit: 1,
disabled: this.getDisableEdit()
});

这将在稍后分配给网格本身的插件配置项：

plugins: [
  this._cellEditing
]

这是添加按钮的逻辑：

// Create a record instance through the ModelManager
var newRow = new BidPackageSchedulesGridPanel.Model();
this.getStore().add(newRow);
if (moveToRow) {
  this._cellEditing.startEdit(newRow, 1);
}

还有模型本身：

Ext.define('BidPackageSchedulesGridPanel.Model', {
  extend: "Ext.data.Model",
fields: [
    FieldIds.FIELD_1,
FieldIds.FIELD_2,
FieldIds.FIELD_3,
// Must specify a default value of "" in order to display null values correctly in IE.
{
      name: FieldIds.QUANTITY,
type: 'string',
defaultValue: ""
}

  ],
validators: {
    FIELD_1: [presenceValidator, 'length'],
FIELD_2: 'length',
FIELD_3: 'length',
QUANTITY: presenceValidator
  },
identifier: 'sequential'
});

以及在网格面板的配置中初始化存储的位置：

store:  {
  model: Ext.create("BidPackageSchedulesGridPanel.Model"),
data: []
},

我们使用数据提供者来加载商店数据。

前三个字段的列是使用以下逻辑创建的：

_createColumn: function(label, dataIndex) {
  var column = {
    text: Ext.String.htmlEncode(label),
dataIndex: dataIndex,
sortable: this.isJobSchedule(),
draggable: false,
flex: 1
};

if (this.isJobSchedule() || dataIndex == FieldIds.FIELD_3) {
    Ext.apply(column, {
      editor: {
        xtype: 'textfield'
}
    });
}
  return column;
},

如果我可以提供任何其他代码，请告诉我。我怀疑这是 Ext 中的一个错误，我已经向他们提交了错误报告，但如果有必要，现在解决方法就足够了。

谢谢！

Answer 1

我已经解决了这个问题，但是，它可能会产生无法预料的后果。我在 CellEditor.js 的 setGridMethod 中注意到了这条评论：

        // On view refresh, we need to copy our DOM into the detached body to prevent it from being garbage collected.
        view.on(viewListeners);

确实，我在 GarbageCollector 中设置了一个断点，发现单元格编辑器节点被错误地垃圾收集。我将垃圾收集器间隔（在 GarbageCollector.js 中）设置为 10 秒。在将数据添加到网格并排序后，十秒的窗口通过后，问题 100% 的时间是可重现的。它正在被垃圾回收，因为它的父节点为空（参见 Ext.isGarbage 中的 AND 条件）。

在CellEditor.onViewRefresh()函数中，对于被垃圾回收的组件，这个方法是没有给组件一个父节点，然后就被垃圾回收了。

我变了

    } else if (!sorting) {
        Ext.getDetachedBody().dom.appendChild(dom);
    }

到

    } else {
        Ext.getDetachedBody().dom.appendChild(dom);
    }

问题就解决了。我已经测试了网格编辑功能，似乎没有任何问题。