Best Practices concerning initComponent() in Ext.define()

Question

I'm writing all my components in ExtJS's new MVC fashion using Ext.define().

I struggle a bit whether define properties inside of initComponent() or by simply setting them like property: 42,.

Are there widely accepted best practices?

I'm staggering between using initComponent() only when necessary (ie. when I want something dynamic or set a scope) which keeps the function shorter and spares me some ugly this.s and using it always which has the benefit, that I'd never have to move former properties to initComponent() just because I want to make it more dynamic.

Unfortunately, Sencha's docs don't tell much about that and the available examples seem to do as they want.

Answer 1

Personal practice, I will declare variables in the properties area when the

• variables defining magnitude, like x, y, width, height
• variables that awaiting to be overridden, or customizable, like title, saveBtnTxt, url, fields, iconCls
• some constants, that will have special prefixes so will not be overridden so easily

Then I will declare items, listeners, this.on, Ext.apply(me, {..}) or anything that requires the scope of the obj (this, me), to sit inside my initComponent. Or stuff that should be modified/overridden before everything is setting up so user will not break my component by overriding some of the important variables.

Of course that'll serve as my guidance. 2 cents

EDIT

About the ugly this, I have used the variable me widely in my app, and it looks a lot cleaner than this. It benefits me from changing scopes less frequently too.

Answer 2

I want to add to Lionel's answer that it is better to declare any non-primitive config in initComponent. (By primitive I mean string, boolean and number). Array and Object go into initComponent.
So definition should look like this:

Ext.define('My.NewClass', {
  extend: 'OldClass',
  // here all primitive configs:
  cls: 'x-my-cls',
  collapsible: true,
  region: 'west',
  // and so on ...

  initComponent: function() {
    // here you declare non-primitive configs:
    this.tbar = [/* blah-blah */];
    this.columns = [/* blah-blah */];
    this.viewConfig = {/* blah-blah */};
    // and so on ...

    this.callParent(arguments);
  }

  // other stuff
}

The reason why you should put all non-primitive configs into initComponent is that otherwise configs of all instances will refer to the same objects. For example if you define NewClass like:

Ext.define('My.NewClass', {
  extend: 'OldClass',
  bbar: Ext.create('Ext.toolbar.Toolbar', {
  // ...

bbars of all instances will refer to the same object. And therefore every time you create new instance bbar disappears from the preveous instance.