ExtJs - Ошибки в GridPanel с использованием CellEditor после сортировки столбца

Question

Seen с помощью 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 

Соответствующий бит кода в OnShow методе CellEditor в:

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% случаев. Это был сбор мусора, потому что его родительский узел был нулевым (см. Условие AND в Ext.isGarbage).

В функции CellEditor.onViewRefresh() для компонента, который был собран мусором, этот метод не предоставлял компоненту родительский узел, а затем собирался сбор мусора.

Я изменил

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

в

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

и проблема ушла. Я протестировал функциональность редактирования сетки и ничего не сломалось.