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

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.

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.