extjs 6 Nested grids with widgetcolumn

Question

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?

It's not going to work, I suggest you look for an alternate solution to nesting grids inside grids. — Evan Trimboli

p91paul p91paul · Accepted Answer · 2016-02-19T16:16:39

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.

extjs 6 Nested grids with widgetcolumn

1 Answers