У меня есть родительская сетка и вложенная сетка, созданная из «parentId» при событии расширения.
Мне нужно, чтобы пользователь редактировал и ячейку из родительской сетки, и ячейку из дочерней сетки. Я использовал rowexpander для родительской сетки и плагин для редактирования строк для внутренней сетки. Я решил много проблем для внутренней сетки, и теперь все в порядке, или нет ...
Rowexpander не позволяет мне редактировать родительскую строку. Затем я создал всплывающее окно для сделать это на событие клика. Затем я ухожу из этого решения, потому что всплывающий объект окна разрушает внутреннюю сетку, у верьте .... Тогда все было правильно, но после нескольких выпусков (1,2,3,4,5) родительской строки, а затем собирался редактировать внутреннюю строка сетки, я получаю это сообщение об ошибке из заголовка:
"Uncaught TypeError: Не удалось выполнить« содержит »на« Узле »: параметр 1 не относится к типу« Узел »."
Примечание 1: я переписал класс Ext.view.Table, чтобы исправить ошибку, например "siGroup ...", перенаправив события элемента в правильную сетку.
Примечание 2. Я переписал класс Ext.grid.plugin.RowEditing, чтобы переопределить onEnterKey, чтобы позволить пользователю записывать новые строки в текст. запускал кнопку «Сохранить» редактора строк.
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