Javascript 带widgetcolumn的extjs 6嵌套网格

我试图用widgetcolumn在Extjs 6中实现nestend网格（使用RowExpander对我的任务来说不是一个好的解决方案）

父网格存储中的每个记录都有许多子记录，这些子记录具有“hasMany association”存储，必须使用远程组合框进行编辑

但是嵌套网格在extjs中存在冲突

现在看起来怎么样：

源代码：

{
        xtype: 'widgetcolumn',
        text: 'my-russian-header-text :)',
        tdCls: 'cell-no-padding',
        onWidgetAttach: function(column,widget,record) {
            // record.projections() returns hasMany store
            widget.bindStore(record.projections());
        },
        widget: {
            xtype: 'grid',
            viewType: 'tableview',
            border: 0,
            plugins: [{ ptype: 'cellediting', clicksToEdit: 1}],
            hideHeaders: true,
            scrollable: false,
            columns: [
                {
                    dataIndex: 'user_id',
                    editor:{},
                }
            ],
            listeners: {
                afterrender: function() {
                    this.getEl().swallowEvent([
                        'mousedown', 'mouseup', 'click',
                        'contextmenu', 'mouseover', 'mouseout',
                        'dblclick', 'mousemove', 'focus'
                    ]); // advice from here: http://hmxamughal.blog.com/2012/10/23/grid-in-grid/
                }
            }
        }
    },

我有这样的错误：

未捕获的TypeError:无法读取null的属性“isHeader”

未捕获的TypeError:无法读取null的属性“isGroupHeader”

超过最大调用堆栈大小

有人能帮忙找到嵌套网格的好实现吗？或者针对我的需要有什么不同的解决方案？

我有你的问题（实际上是使用rowexpander），我用

Ext.create('Ext.grid.Panel', {
    plugins  : [{
        ptype      : 'rowexpander',
        rowBodyTpl : ['<div id="expander-inner-{id}"></div>'],
        pluginId: 'rowexpander'
    }],
    data: [{
        id: 1,
        val: "foo"
    }],
    ... //other options
});
var subgrid = Ext.create('Ext.grid.Panel', {
    renderTo: 'expander-inner-1',
    .... //other options
});
subgrid.getEl().swallowEvent([
      'mousedown', 'mouseup', 'click',
      'contextmenu', 'mouseover', 'mouseout',
      'dblclick', 'mousemove', 'focusmove',
      'focuschange', 'focusin', 'focusenter'
]);

Ext.create（'Ext.grid.Panel'{
插件：[{
p类型：“行扩展器”，
rowBodyTpl:['']，
pluginId:“行扩展器”
}],
数据：[{
id:1，
瓦尔：“福”
}],
…//其他选择
});
var subgrid=Ext.create（'Ext.grid.Panel'{
renderTo:'expander-inner-1'，
..//其他选项
});
subgrid.getEl（）事件([
'mousedown'、'mouseup'、'click'，
'contextmenu'、'mouseover'、'mouseout'，
“dblclick”、“mousemove”、“focusmove”，
“focuschange”、“focusin”、“focusenter”
]);

---

请注意如何在内部网格el上调用事件，以及吞入的

'focus*'

事件数。对我来说，

focusenter

解决了nastier错误，

超过了最大调用堆栈大小

。如果这个答案有点不相关（你不想使用rowexpander），我也会发布这个答案，因为我得到了非常相同的js异常，所以我希望它会有用。

这行不通，我建议你寻找一个替代解决方案，在网格中嵌套网格。