ExtJS版本:6.2.1.167
小提琴:fiddle.sencha.com/#view/editor&fiddle/1tlt
此功能在ExtJS 2.x中有效,并且没有任何问题。
<小时/>
拥有一个网格(带有分组功能和单元格编辑插件),可以在一列中包含多个不同的编辑器(textfield
和combo
s。)
网格颠覆了传统的表格系统,以便垂直显示字段名称和记录值。表头的示例如下所示:
+-------------+-----------------+-----------------+-----------------
- 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
错误#2
无法获取未定义或空引用的属性parentNode
这两个错误的原因是因为它当前引用的编辑器上的el
属性已被破坏,这意味着没有dom
属性。
<小时/>
这是我无法解决这个问题的部分原因。我无法找到复制问题的具体方法。不幸的是,我可以获得错误的方法是随机组合单击/跳转到单元格,输入数据,切换到其他单元格,切换组等...我当前通常工作的方法包括输入一些随机数据然后疯狂地点击在两个相邻的细胞之间交替聚焦。大多数情况下,错误花费的时间不到30秒。
我目前的理论是,有一个事件被触发,它调用某些函数,无论出于何种原因,它都会破坏编辑器的el
属性。我已经尝试查看错误调用堆栈顶部的值,看来此时el
属性已被销毁。
我正在寻找有关如何追查问题的实际原因的建议。
事实证明,目前有一个关于在单元格编辑器中使用组合的错误。这是另一个有类似问题的人:
以下是错误ID:EXTJS-23330
根据Sencha支持,目前没有可用的解决方法,错误仍然存在。
6.0.2和6.5中存在此错误。
幸运的是,我找到了一种更一致地重现错误的方法:
如果没有发生错误(似乎在6.5中没有发生):
它不是100%,但比随机点击更可靠。
答案 0 :(得分:0)
在代码和调用堆栈中没有更多的上下文很难说,但如果上面的错误#2仍然是手头问题的一个很好的示例,那么你应该能够更改!编辑器。在屏幕截图中的断点正上方显示了检查其他内容以读取else if (!editor.destroyed)
。