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(

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.

Answer 3

  Ext.define('My.Group', {
// extend: 'Ext.form.FieldSet',
xtype : 'fieldset',
config : {
    title : 'Group' + i.toString(),
    id : '_group-' + i.toString()

},
constructor : function(config) {
    this.initConfig(config);

    return this;
},    
collapsible: true,
autoScroll:true,
.....
});

you can use it as follow.

handler : function() {                      
        i = i + 1;
        var group = new My.Group({
            title : 'Group' + i.toString(),
            id : '_group-' + i.toString()
        });
        // console.log(this);
        // console.log(group);
        Ext.getCmp('panelid').insert(i, group);
        Ext.getCmp('panelid').doLayout();
    }