Change inheritance with overrides

Question

I would like to bend an existing inheritance structure a bit, inserting another custom-written layer. Given is the following inheritance:

Ext.define('ThirdPartyLib.panel.GridPanel',{
    extend:'Ext.grid.Panel',
    initComponent:function() {
        ...
    }
});

Ext.define('MyApp.view.MyGridView',{
    extend:'Ext.grid.Panel',
    initComponent:function() {
        ...
    }
});

Ext.define('MyApp.view.MySpecialGridView',{
    extend:'MyApp.view.MyGridView',
    initComponent:function() {
        ...
    }
});

and now I want to change the Third Party Lib to use my parent class instead, so my own initComponent is executed as well:

Ext.define('MyApp.override.MyGridView',{
    override:'ThirdPartyLib.panel.GridPanel',
    extend:'MyApp.view.MyGridView'
});

This does not work. If I change it immediately in the ThirdPartyLib code, it works:

Ext.define('ThirdPartyLib.panel.GridPanel',{
    extend:'MyApp.view.MyGridView'
});

but this would break whenever a new version of the third-party lib is available.

Ext.Class.mixins does allow to mix new functions into old classes, but I can't override initComponent then.

Any ideas?

Answer 1

Since you are using Ext JS 4, technically, you can achieve that with this hacky trick:

Ext.define('', Ext.apply(ThirdPartyLib.panel.GridPanel.prototype, {
    extend: 'MyApp.view.MyGridView'
}));

See in action: https://fiddle.sencha.com/#fiddle/spf

Note that it will not work in Ext JS 5 or higher.

A clean and sustainable solution would be to move your custom stuff out of initComponent to a mixin, override ThirdPartyLib.panel.GridPanel and call the mixin's methods in the overridden initComponent.