Ext.define() 中关于 initComponent() 的最佳实践

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', {
  // ...

bbar s 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();
    }