在展开事件中，我有一个父网格和一个由“ parentId”创建的嵌套网格。
我需要用户编辑父网格中的一个单元格和子网格中的一个单元格。我将rowexpander用于父网格，将rowediting插件用于内部网格。我解决了内部网格的许多问题，现在可以了，或者......
Rowexpander不要让我编辑父行。然后，我创建了一个弹出窗口，用于单击事件。然后我退出此解决方案，因为您的窗口弹出对象破坏了内部网格，您相信...。然后一切正常，但是在某些版本（1,2,3,4,5）到父行之后，然后编辑了内部网格行，我从标题中收到此错误消息：
“未捕获的TypeError：无法在'Node'上执行'contains'：参数1的类型不是'Node'。”
注意1：我重写了Ext.view.Table类，以更正诸如“ siGroup ...”之类的错误，并将项目事件重新分配到正确的网格。
注2：我覆盖了Ext.grid.plugin.RowEditing类以覆盖onEnterKey，以允许用户在文本中写入新行。正在启动roweditor的“保存”按钮。
var store = Ext.create('Ext.data.Store', {
requires: [
'myapp.model.Publicacion'
],
autoDestroy: true,
id: 'myappStoreId',
model: 'myapp.model.Publicacion',
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});
Ext.define('Ext.grid.plugin.override.RowEditing', {
override: 'Ext.grid.plugin.RowEditing',
onEnterKey: function() {
if (this.getEditor().getForm().isValid()) {
// this.completeEdit();
}
}
});
Ext.define('sistradocext.table.MyTableGrid', {
override: 'Ext.view.Table',
// Stock fooMethod has a bug, so we are
// replacing it with a fixed method
processItemEvent: function(record, row, rowIndex, e) {
if (e.target && !this.checkTheContextIsParentGridView(e)) {
return false;
} else {
return this.callParent([record, row, rowIndex, e]);
}
},
checkTheContextIsParentGridView: function(e){
var target = Ext.get(e.target);
var parentGridView = target.up('.x-grid-view');
if (this.getId() != parentGridView.getId()) {
// console.log('nested grid!!');
return false;
} else {
// console.log('parent grid!!');
return true;
}
}
});
Ext.define('NestedGrid.ux.RowExpanderGrid', {
extend: 'Ext.grid.plugin.RowExpander',
requires: [
'Ext.grid.feature.RowBody',
'Ext.grid.plugin.RowExpander',
'Ext.grid.Panel'
],
alias: 'plugin.rowexpandergrid',
....
....
setCmp: function(outerGrid) {
var me = this;
this.rowBodyTpl=new Ext.XTemplate('<div class="detailData"></div>');
me.callParent(arguments);
},
init:function(outerGrid){
var me = this;
// Calling the parent init function of RowExpander
this.callParent(arguments);
// Attaching event handler on the gridview's event like
// (expandbady/collapsebody)
outerGrid.getView().on('expandbody',me.addInnerGridOnExpand,me); // outerGrid.getView().on('collapsebody',me.removeInnerGridOnCollapse,me);
},
addInnerGridOnExpand : function (rowNode, record, expandRow, eOpts) {
var me=this;
if( Ext.fly(rowNode).down('.x-grid-view')){
return;// if grid already exists, don't do nothing
}
// Resetting the expanded records object of row expander plugin
me.recordsExpanded[record.internalId] = false;
// Getting the dom element in which we have to render the inner grid
var detailData = Ext.DomQuery.select("div.detailData", expandRow);
// Creating the object of inner grid
var store = ...
// CallAjaxWithPromise
var innerGrid=Ext.create('Ext.grid.Panel',{....
columns: [
...
{ text: 'bitaObservacion',
dataIndex: 'bitaObservacion',
flex: 6,
cellWrap:true,
editor: {
xtype: 'textareafield',
height: 250,
}
}
]
});
innerGrid.render(detailData[0]);
}
});
Ext.define('NestedGrid',{
extend:'Ext.grid.Panel',
xtype:'nestedgrid',
requires:['Ext.grid.Panel','NestedGrid.ux.RowExpanderGrid'],
title: '..',
autoHeight:true,
store: parentgridstore,
columns: [
...
{
text: 'Materia',
dataIndex: 'fieldToEditRomParentGrid',
flex: 4,
cellWrap:true,
editor: {
xtype: 'textareafield', // 'textfield',
allowBlank: false
},
listeners: {
dblclick: function (grid, value, index,e) {
var store = grid.grid.getStore();
var archivo = store.getData().items[index].getData();
var record = store.getData().items[index];
record.set('docuMateriaDetalle',record.get('docuMateriaDetalle')+'-Some fake text');
/*
* scope.editCellWithPopup(scope, grid, value, index,
* 'fieldToEditRomParentGrid', "FieldLabel",'Edit Cell','textareafield');
*/
}
},
},
more columns here...
],
plugins:[{ptype:'rowexpandergrid'}],
}
);
myGrid =Ext.create('NestedGrid',{
itemId: 'parentGridId',
renderTo:Ext.getBody()
});
gridPanel.add(myGrid );
store.loadRawData(arrayWithAjaxJsonDataFromRequest, true);
问题是当我单击父行几次时，谁单击事件会更新记录，然后转到嵌套网格并尝试编辑单元格。 在不触摸或单击父网格单元的情况下编辑嵌套网格时，一切正常！！！我可以随时编辑嵌套的网格字段textarea。 但是，当我单击父行单元格并返回以编辑嵌套网格单元格时，我得到了一个错误。
注意：单击/更改父行单元格时，嵌套子网格将重新打开！！自动刷新可能是？所做的一切都消失了，从ajax调用中恢复数据。...
消息错误：
Uncaught TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'.
at constructor.isAncestor (ext-all-rtl-debug.js?_dc=1561581000103:21719)
at constructor.repositionIfVisible (ext-all-rtl-debug.js?_dc=1561581000103:128408)
isAncestor @ ext-all-rtl-debug.js…1561581000103:21719
repositionIfVisible @ ext-all-rtl-debug.js…561581000103:128408
fire @ ext-all-rtl-debug.js…1561581000103:11803
doFireEvent @ ext-all-rtl-debug.js…1561581000103:12332
prototype.doFireEvent @ ext-all-rtl-debug.js…1561581000103:33463
fireEventArgs @ ext-all-rtl-debug.js…1561581000103:12300
fireEvent @ ext-all-rtl-debug.js…1561581000103:12274
fireHierarchyEvent @ ext-all-rtl-debug.js…1561581000103:41411
afterShow @ ext-all-rtl-debug.js…1561581000103:39369
show @ ext-all-rtl-debug.js…1561581000103:41031
startEdit @ ext-all-rtl-debug.js…561581000103:128707
startEdit @ ext-all-rtl-debug.js…561581000103:138764
onCellClick @ ext-all-rtl-debug.js…561581000103:137593
fire @ ext-all-rtl-debug.js…1561581000103:11803
doFireEvent @ ext-all-rtl-debug.js…1561581000103:12332
prototype.doFireEvent @ ext-all-rtl-debug.js…1561581000103:33463
fireEventArgs @ ext-all-rtl-debug.js…1561581000103:12300
fireEvent @ ext-all-rtl-debug.js…1561581000103:12274
processItemEvent @ ext-all-rtl-debug.js…1561581000103:97869
callParent @ ext-all-rtl-debug.js…=1561581000103:7381
processItemEvent @ PublicacionesControl…c=1561581002674:272
processUIEvent @ ext-all-rtl-debug.js…1561581000103:95165
handleEvent @ ext-all-rtl-debug.js…1561581000103:95123
fire @ ext-all-rtl-debug.js…1561581000103:11803
fire @ ext-all-rtl-debug.js…1561581000103:18548
publish @ ext-all-rtl-debug.js…1561581000103:18524
doDelegatedEvent @ ext-all-rtl-debug.js…1561581000103:18574
onDelegatedEvent @ ext-all-rtl-debug.js…1561581000103:18561
method @ ext-all-rtl-debug.js…=1561581000103:4405
nrWrapper @ (index):8