javascript - 通过覆盖更改继承

Question

我想稍微改变现有的继承结构，插入另一个自定义编写的层。给出以下继承:

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() {
        ...
    }
});

现在我想更改第三方库以使用我的父类，因此我自己的 initComponent 也会被执行:

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

这不起作用。如果我立即在 ThirdPartyLib 代码中更改它，它就会起作用:

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

但是只要有新版本的第三方库可用，这就会中断。

Ext.Class.mixins 确实允许将新函数混合到旧类中，但我无法覆盖 initComponent。

有什么想法吗？

Answer 1

由于您使用的是 Ext JS 4，从技术上讲，您可以通过以下技巧实现这一点:

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

查看实际操作:https://fiddle.sencha.com/#fiddle/spf

请注意，它在 Ext JS 5 或更高版本中不起作用。

一个干净且可持续的解决方案是将您的自定义内容从 initComponent 移至 mixin，覆盖 ThirdPartyLib.panel.GridPanel 并在覆盖的内容中调用 mixin 的方法initComponent。