javascript - Ext JS : Overriding Ext. Array.merge inside initComponent

Question

如何在子类的 initComponent 中更改/覆盖 Ext.Array.merge 的顺序？

当我override 子类中的顺序时出现错误，而当我只是扩展 基本面板时它仍然使用相同的merge 顺序基类。

一些片段:

Ext.define('MyApp.BasePanel', {
extend: 'Ext.panel.Panel',
    initComponent: function () {
        var me = this;

        me.items = Ext.Array.merge(me.firstFunc(), me.secondFunc(), me.thirdFunc());

        me.callParent(arguments)
    },

    firstFunc: function () {
        return [];
    },

    secondFunc: function () {
        return [];
    },

    thirdFunc: function () {
        return [];
    },

在这种情况下，我需要调用 as;

me.items = Ext.Array.merge(me.secondFunc(), me.firstFunc(), me.thirdFunc());

我试图覆盖基类，但它提供了 Synch。加载错误；

Ext.define('MyApp.SubPanel', {
    override: 'MyApp.BasePanel',
        initComponent: function () {
            var me = this;

            me.items = Ext.Array.merge(me.secondFunc(), me.firstFunc());

            me.callParent(arguments)
        },

        secondFunc: function () {
            return [];
        },

        firstFunc: function () {
            return [];
        },


// Error: [W] [Ext.Loader] Synchronously loading 'MyApp.SubPanel'; consider adding Ext.require('MyApp.SubPanel') above Ext.onReady

Answer 1

即使您按照您的描述覆盖它，callParent() 也只会破坏您的子类所做的任何事情。提供一个模板方法作为钩子(Hook):

Ext.define('MyApp.BasePanel', {
    extend: 'Ext.panel.Panel',
    initComponent: function() {
        this.items = this.setupItems();
        this.callParent();
    },

    setupItems: function() {
        return Ext.Array.merge(me.firstFunc(), me.secondFunc(), me.thirdFunc());
    },

    firstFunc: function() {
        return [];
    },

    secondFunc: function() {
        return [];
    },

    thirdFunc: function() {
        return [];
    }
});

Ext.define('MyApp.SubPanel', {
    extend: 'MyApp.BasePanel',

    setupItems: function() {
        return Ext.Array.merge(me.secondFunc(), me.firstFunc(), me.thirdFunc());
    }
});