ExtJS error in nested grids : Cannot read property 'isGroupHeader' of null

Question

whenever i expand or collapse row in nested grid I get the following error :

"Uncaught TypeError: Cannot read property 'isGroupHeader' of null"

google gave me this url , but it doesn't seems to work in 5.1 , any idea how to convert it to solve 5.1 problem ?

http://blog.kondratev.pro/2014/08/getting-rid-of-annoying-uncaught.html

Here is fiddle example for the error : https://fiddle.sencha.com/#fiddle/g5b

Answer 1

This happens because grid cell or cell editor event (mouseover, click or whatever) is fired in context of another grid (parent or ancestor). Here you can see how to stop the events from bubbling:

Ext.require(['Nested.view.NestedGrid'], function() {
    var nGrid = Ext.create({
        type: 'nestedgrid',
        renderTo: div
    });

    // prevent bubbling of the events
    nGrid.getEl().swallowEvent([
        'mousedown', 'mouseup', 'click',
        'contextmenu', 'mouseover', 'mouseout',
        'dblclick', 'mousemove'
    ]);

});

Answer 2

Ext.define('MyApp.overrides.GridColumn', {
    override: 'Ext.grid.column.Column',

    show: function () {
        if (!this.getRefOwner()) {
            return;
        }
        this.callParent(arguments);
    }
});

Here's the workaround for this that I am using.

Answer 3

Find ext-all-debug.js source error method, and then create a new js into the "ext-all *. Js" location after loading, my version is: Ext JS 6.2.0.981

The core code is: Object.prototype.function and xxx != null

Postfix code:

Ext.event.publisher.Dom.prototype.unsubscribe = function (element, eventName, delegated, capture) {
    var me = this,
        captureSubscribers, bubbleSubscribers, subscribers, id;
    if (delegated && !me.directEvents[eventName]) {
        captureSubscribers = me.captureSubscribers;
        bubbleSubscribers = me.bubbleSubscribers;
        subscribers = capture ? captureSubscribers : bubbleSubscribers;
        if (subscribers != null && subscribers[eventName]) {
            --subscribers[eventName];
        }
        if (me != null && bubbleSubscribers != null && captureSubscribers != null && !me.handles[eventName] && !bubbleSubscribers[eventName] && !captureSubscribers[eventName]) {
            // decremented subscribers back to 0 - and the event is not in "handledEvents"
            // no longer need to listen at the dom level
            this.removeDelegatedListener(eventName);
        }
    } else {
        subscribers = capture ? me.directCaptureSubscribers : me.directSubscribers;
        id = element.id;
        subscribers = subscribers[eventName];
        if (subscribers[id]) {
            --subscribers[id];
        }
        if (!subscribers[id]) {
            // no more direct subscribers for this element/id/capture, so we can safely
            // remove the dom listener
            delete subscribers[id];
            me.removeDirectListener(eventName, element, capture);
        }
    }
};