CODEWITHSUNDEEP
javascriptfunctionextjsoverriding
Nuri Engin
Nuri Engin

Reputation: 823

Ext JS: Overriding Ext.Array.merge inside initComponent

How can I change/override order of Ext.Array.merge inside initComponent within a child class?

It gives error when I override the order inside child class and when I just extend the base panel it still uses same merge order in base class.

Some snippets:

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 [];
    },

In this case I need to call as;

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

I've tried to override base class but it gives Synch. Loading error;

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

Upvotes: 2

Views: 247

Answers (1)

Evan Trimboli
Evan Trimboli

Reputation: 30082

Even if you override it as you described, the callParent() is just going to clobber whatever your subclass does. Provide a template method as a 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());
    }
});

Upvotes: 2

Related Questions