extjs 6 带有 widgetcolumn 的嵌套网格

Question

我正在尝试使用 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/
                }
            }
        }
    },

我有这样的错误：

未捕获类型错误：无法读取属性 'isHeader' of null
未捕获类型错误：无法读取属性 'isGroupHeader' of null
超过最大调用堆栈大小

有人可以帮助找到嵌套网格的良好实现吗？或满足我需求的任何不同解决方案？

Answer 1

我遇到了你的问题（实际上使用的是 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'
]);

注意内部网格 el 上调用 swallowEvent 的方式，以及吞下的 'focus*' 事件的数量。对我来说，focusenter 解决了更严重的错误 maximum call stack size exceeded。我 post 如果它稍微不相关（你不想使用 rowexpander），我也会回答这个问题，因为我得到了完全相同的 js 异常，所以我希望它会有用。

extjs 6 带有 widgetcolumn 的嵌套网格

extjs 6 Nested grids with widgetcolumn

javascript

extjs

extjs4

extjs6