why is this.callParent(arguments); called at the beginning of the constructors in ExtJS?

Question

I noticed that in a lot of the programs I have been modifying recently they always call the parent arguments of the current object. I know that this is needed but don't have a solid understanding as to why this is a common practice. Any wisdom out there for a junior level developer... I should know this.

Answer 1

This is the mechanism that ExtJS uses to support class inheritance in constructors. Calling this.callParent(arguments) in a constructor calls the constructor of the immediate parent class that's being extended.

Answer 2

I don't know which version is this question about. But as far as my code goes, in Ext JS 5, callParent() - Calls the "parent" method of the current method. That is the method previously overridden by derivation or by an override

Try out this code.

MyApp.test::LifecycleExample.js

Ext.define('MyApp.test.LifecycleExample', {
    extend: 'MyApp.test.TrialComponent',

    initComponent: function() {
        var me = this;

        me.width = 200;
        me.height = 100;
        me.html = {
            tag: 'div',
            html: 'X',
            style: {
                'float': 'right',
                'padding': '10px',
                'background-color': '#e00',
                'color': '#fff',
                'font-weight': 'bold'
            }
        };
        console.log("init is called before callParent()");

        me.myOwnProperty = [1, 2, 3, 4];

        me.callParent();

        console.log('1. initComponent');
    },

    beforeRender: function() {
        console.log('2. beforeRender');

        this.callParent(arguments);
    },

    onRender: function() {
        console.log('3. onRender');

        this.callParent(arguments);

        this.el.setStyle('background-color', '#ff0');
    },

    afterRender: function() {
        console.log('4. afterRender');

        this.callParent(arguments);

        this.el.down('div').on('click', this.myCallback, this);
    },

    beforeDestroy: function() {
        console.log('5. beforeDestroy');

        this.callParent(arguments);
    },

    onDestroy: function() {
        console.log('6. onDestroy');

        delete this.myOwnProperty;
        this.el.un('click', this.myCallback);

        this.callParent(arguments);
    },

    myCallback: function() {
        var me = this;
        Ext.Msg.confirm('Confirmation', 'Are you sure you want to close this panel?', function(btn) {
            if (btn === 'yes') {
                me.destroy();
            }
        });
    }
});

MyApp.test::TrialComponent.js (Ext.Component)

Ext.define('MyApp.test.TrialComponent', {
    extend: 'Ext.Component',

    constructor: function() {
        console.log('parent const');
        this.initComponent();
    },

    constructor: function(config) {
        console.log('parent const config' + config);
        this.initComponent();
    }
});

The output in the console of the browser is:

parent const config[object Object]
init is called before callParent()
1. initComponent

---

callParent( args ) Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override

Reference is ext js api docs.

http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Base-method-callParent

Answer 3

According to the doco (thanks javaCoder) http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.Base-static-method-callParent:

Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).

And arguments is:

Parameters
args : Array/Arguments
The arguments, either an array or the arguments object from the current method, for example: this.callParent(arguments)

Though this suggests to me that arguments represents the argument object to this method. However when looking at the Developer Tools, it is that object encapsualted in another object that also includes some other information such as the callee: