2017-04-07 81 views
6

纸币发行

ExtJS的版本:6.2.1.167ExtJS的6:使用多个编辑器在一个单一的网格列

小提琴:fiddle.sencha.com/#view/editor &小提琴/ 1tlt

此功能在ExtJS 2.x中运行,并没有任何问题。


目标

为了有一个网格(具有分组功能和细胞编辑插件),其可以具有在单个列中的多个不同的编辑器(textfieldcombo S)。

网格已颠倒传统的表系统,以便字段名称和记录值垂直显示。表头的一个示例如下所示:

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

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


代码

Here is the fiddle

这里是主要的代码,让我使用多个编辑:

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

enter image description here

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

screenshot

enter image description here

这两个错误的原因是因为它目前引用编辑器el财产已被破坏,这意味着没有dom财产。


如何重现

这就是为什么我一直没能解决这个的原因之一。我一直无法找到复制问题的具体方法。不幸的是,我可以得到错误的方式是点击/切换到单元格,输入数据,切换到其他单元格,切换组等等的随机组合......我通常使用的当前方法涉及到输入一些随机数据然后疯狂点击以在两个相邻小区之间交替焦点。大多数情况下,只需要不到30秒即可获得错误信息。

我目前的理论是,有被解雇的事件,调用一些功能,无论出于何种原因,破坏了编辑的el财产。我试着看看错误调用堆栈顶部的值,看起来el属性在那个时候已经被销毁了。


我正在寻找如何追查问题的实际原因建议的底线。


更新

事实证明,这周围有使用单元格编辑连击此刻旋转的错误。这里是另一个人有一个非常类似的问题:

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

这里是错误ID:EXTJS-23330

据煎茶支持,有目前没有解决方法可用,错误仍然是开放的。


更新#2

此错误存在于6.0.2和6.5。

幸运的是,我已经找到了一种更加一致重现bug:

  1. 将鼠标悬停在A组,持续5秒。展开组A。
  2. 将鼠标悬停在(字段1,值列)上5秒钟。
  3. 单击(字段1,值列)。
  4. 等待5秒钟,然后塌陷组A.
  5. 等待3秒,则B组头悬停。
  6. 等待10秒,然后将鼠标悬停在A组标题上。
  7. 等待3秒钟,然后展开A组。
  8. 将鼠标悬停在(字段1,值列)字段上3秒钟。
  9. 将鼠标悬停(字段1,值2列)3秒钟。
  10. 单击(字段1,值2列)。

如果不出现错误(好像不是在6.5尚未发生):

  1. 等待3秒,然后单击(字段1,值列)。
  2. 等待1秒钟,然后再次单击(字段1,值列)。

这不是100%,但比随机点击更可靠。

回答

0

如果在代码和调用堆栈中没有更多的上下文很难分辨出来,但是如果上面的错误#2仍然是问题的一个很好的例子,那么你应该可以改变!editor.rendered check阅读else if (!editor.destroyed),正好在屏幕截图中的断点之上。