extjs 6 Nested grids with widgetcolumn

最新推荐文章于 2024-07-30 17:48:08 发布

原创最新推荐文章于 2024-07-30 17:48:08 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

extjs 专栏收录该内容

21 篇文章

订阅专栏

本文探讨了在 ExtJS 6 中使用 widgetcolumn 实现嵌套网格的方法，针对每个父记录包含多个子记录的情况进行了讨论，并提供了一个使用 rowexpander 解决方案的示例。

I'm trying to implement nestend grid in Extjs 6 with widgetcolumn (Using RowExpander is not good solution for my task).

Each record in the parent grid store has many subrecords with "hasMany association" store, which has to be editable with remote combobox.

But nested grids has conflicts in extjs.

How does it looks now: http://joxi.ru/52aQMXdCZjZP20

Source code:

{
        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/
                }
            }
        }
    },

I have such errors:

Uncaught TypeError: Cannot read property 'isHeader' of null
Uncaught TypeError: Cannot read property 'isGroupHeader' of null
maximum call stack size exceeded

Can somebody help to find nice implementation of nested grid? or any different solution for my needs?

asked Dec 10 '15 at 19:26

user685279

21 4

It's not going to work, I suggest you look for an alternate solution to nesting grids inside grids. – Evan Trimboli Dec 10 '15 at 20:20

add a comment

1 Answer

active oldest votes

up vote 0 down vote

I had your issue (using rowexpander actually), and i solved it with

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'
]);

Notice how the swallowEvent is called on the inner grid el, and the number of 'focus*' events swallowed. For me, focusenter did the trick to solve the nastier bug, maximum call stack size exceeded. I post this answer also if it is slightly unrelated (you don't want to use rowexpander) because I got the very same js exceptions, so I hope it'll be useful.