使用覆盖更改继承

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

现在我想更改第三方库以使用我的父级 class，所以我自己的 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 确实允许将新函数混合到旧的 classes 中，但我不能 override initComponent。

有什么想法吗？

Answer 1

由于您使用的是 Ext JS 4，从技术上讲，您可以使用这个 hacky 技巧来实现：

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

查看实际效果：https://fiddle.sencha.com/#fiddle/spf

请注意，它不适用于 Ext JS 5 或更高版本。

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

使用覆盖更改继承

Change inheritance with overrides

javascript

inheritance

extjs

extjs4