Properly extending ExtJS component without overwriting listeners

Question

Consider the following example class Parent:

Ext.define('Parent', {

    ...
    listeners: {
        render: {
            fn: doSomething
        },
    },

};

and the following class Child extending default Parent above:

Ext.define('Child', {
    extend: 'Parent',

    ...
    listeners: {
        afterrender: {
            fn: doSomething
        },
    },
};

Even though Child does not specify a listener for render (it only provides for afterrender) the render listener (defined in the Parent class) is not fired anymore upon Child's component rendering; i.e. the listener is overwritten by the new listeners specification.

How to fix this?

Answer 1

You can specify the handler in initComponent, instead of using the listeners config object.

Ext.define('Child', {
    extend: 'Parent',

    ...
    initComponent: function() {
        this.on('afterrender', this.onAfterRender);
    },

    onAfterRender: function() {
        ...
    }
};

The reason that the listeners config method doesn't work is because the config object that is passed to Ext.define gets Ext.apply'd to any new objects that are created. In other words, it completely overwrites any reference types (e.g. the listeners object).

Using initComponent is preferred, since it's specifically designed to be overridden for subclassing.