Question

我尝试使用widgetcolumn在Extjs 6中实现nestend网格（使用RowExpander不是我的任务的好方法）。

父网格存储中的每条记录都有许多子记录，其中包含＆＃34; hasMany association＆＃34;存储，必须使用远程组合框进行编辑。

但嵌套网格在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：无法读取属性＆＃39; isHeader＆＃39;为null
未捕获的TypeError：无法读取属性＆＃39; isGroupHeader＆＃39;为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。如果它稍微不相关（你不想使用rowexpander），我也会发布这个答案，因为我得到了相同的js异常，所以我希望它有用。

extjs 6带有widgetcolumn的嵌套网格

1 个答案: