Question

When should I be using initComponent compared to constructor ?

I have been using initComponent to extend my objects, but looking at the docs for Ext.define is see them using constructor all over then place. what is the difference?

compare:

Ext.define('My.app.PanelPart2', {
    extend: 'My.app.Panel',
    constructor: function (config) {
        this.callSuper(arguments); // calls My.app.Panel's constructor
        //...
    }
});

to

Ext.define('My.app.PanelPart2', {
    extend: 'My.app.Panel',
    initComponent: function (config) {
        Ext.apply(this, config);
        this.callParent(arguments);
    }
});

I am aware of the fact that some components don’t init ( Im looking at you Ext.data.Store ), which leads me towards leaning towards only over writing the constructor, as that should be universal.

Answer 1

constructor is OOP standard for initializing objects instances and is available in every ExtJS class (everything created by Ext.define).

initComponent is ExtJS extension for initializing components – classes that extends Ext.Component. It uses templated method pattern and enables some standard initialization steps before and after your custom component init. Something like this:

Ext.Component.constructor() {
    - init events
    - apply config
    - create plugins
    - ...
    - your custom component initialization (initComponent)
    - ...
    - init plugins
    - etc.
}

My best pratices are to use initComponent whenever I’m creating custom component and constructor only for generic classes.