Thursday, 7 August 2014

Getting rid of annoying Uncaught TypeError: Cannot read property 'isGroupHeader' of null

"Uncaught TypeError: Cannot read property 'isGroupHeader' of null" in sencha 4.x might be caused by nested grids usage. For example if you have grid with RowExpander rendering another grid into expander.

This happens because grid cell or cell editor event (mouseover, click or whatever) is fired in context of another grid (parent or ancestor).

This override might help (it works fine on 4.2.2 for me):

Ext.define('SystemFox.overrides.view.Table', {
    override: 'Ext.view.Table',
    checkThatContextIsParentGridView: function(e){
        var target = Ext.get(e.target);
        var parentGridView = target.up('.x-grid-view');
        if (this.el != parentGridView) {
            /* event of different grid caused by grids nesting */
            return false;
        } else {
            return true;
        }
    },
    processItemEvent: function(record, row, rowIndex, e) {
        if (e.target && !this.checkThatContextIsParentGridView(e)) {
            return false;
        } else {
            return this.callParent([record, row, rowIndex, e]);
        }
    }
});