Extjs: extend class via constructor or initComponent?

Question

In extjs you can always extend an extjs class via the constructor(). For classes derinving from Component you can also extend via initComponent().

I am wondering why so many code extend via initComponent, whereas constructor seems to be the universal extension method. Does initComponent offer clear advantage over constructor?

Answer 1

First off, the ability to override via constructor was added in a later version of Ext than initComponent, so all code of a certain age would have to use initComponent. These days, you would still override initComponent if you want to do anything after the base class initComponent is called (constructor would be too early for this), but before the component is rendered. In many cases (like the most common, setting up configs), it does not practically matter either way and most people do whatever is most convenient. However, there are some cases where it matters.

Answer 2

Let me try an updated answer in terms of ExtJS versions 4.0-4.2 and beyond.

The constructor() is the object/class before create method. And initComponent() is the component before show method.

constructor: function(config) {
  // ctor #1 - insert code here to modify config or run code to inject config
  // probably the cheapest place to make changes - before anything has been built

  this.callParent(arguments);

  // ctor #2 - insert code here if you need to make changes 
  // after everything has been rendered and shown, IIUC
},
initComponent: function() {
  // this function runs between ctor #1 and ctor #2

  // initComponent #1 - the UI component object tree is created,
  // (this object and child objects from config { items: [{...}]})
  // but they have not yet been rendered to DOM or shown.

  this.callParent(arguments);

  // initComponent #2 - I believe this is equivalent to ctor #2, 
  // I would prefer ctor as it is more universal.
}

Panels with children or complex layout you'll probably need to use initComponent, because you'll need to inspect and manipulate the components (the UI object graph).

But for individual form elements (combobox, button, etc.) then I stick with constructor, which I believe is lighter (before any complex object construction or DOM changes) and is more universal. IOW constructors can be used for simple UI, models, and data stores; the latter two can't use initComponent.

So I only use initComponent when there's a reason to do so. Often when I write an initComponent function I'm trying to manipulate child UI objects, and my next step is to extract that child control into its own Ext.define(), the move the custom code to run in the child control class, which removes the complex init from the parent panel. This process I've repeated 4 times in my latest page.

Answer 3

Here are some relevant quotes from Jay Garcia's book ExtJS in Action:

initComponent is executed inside the Component class’s constructor, but only after a few crucial setup tasks for the Component have taken place. These tasks include the caching and application of the configuration object properties to the instance of the class

And later, and in light of constructor being where config parameters get applied to the instance:

if configured instances of the subclass will ever need to be cloned via the cloneConfig ....then extending via the constructor is the best choice.

By the way, despite Jay's book being about ExtJS 3 it appears that cloneConfig is still relevant in ExtJS4; see:

http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Component-method-cloneConfig

and

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-method-cloneConfig