extjs 6 Nested grids with widgetcolumn

最新推荐文章于 2021-02-07 17:29:21 发布

爬虫仔蛙

最新推荐文章于 2021-02-07 17:29:21 发布

阅读量1.2k

点赞数

分类专栏： extjs

本文链接：https://blog.csdn.net/p656456564545/article/details/52241215

版权

extjs 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

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.