23

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.

hynek
  • 3,647
  • 1
  • 18
  • 26

3 Answers3

18

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.

Lionel Chan
  • 7,894
  • 5
  • 40
  • 69
  • Okay, that would be my current approach. It just got tedious when certain properties magically became dynamic, that's why I'm asking. Didn't know about `me` yet...I'm pretty new to ExtJS. – hynek Jul 29 '11 at 11:38
  • No magic here. Just check their source code, you will see a lot of 'me' just flying around. 'me' is just a ref to the object 'this' actually. – Lionel Chan Jul 29 '11 at 11:41
  • The magic was refering to my own code, when I changed my mind and made a property dynamic. Because the lack of solid ExtJS 4 tutorials when I started out, my app got a bit dirty (ie. 3.2 style) and I had to rewrite a lot to make it MVCey. That lead to a lot of pulling properties inside of `initComponent()` which was a bit tedious. So is there any difference between `me` and `this` beside the fact it's shorter? – hynek Jul 29 '11 at 11:46
  • 1
    Shorter, yes, and you probably no need to change scope that frequently as you can always use 'me' in your code. Btw just my opinion, since they don't provide tutorials, learn from their code. It helps me quite a lot :) – Lionel Chan Jul 29 '11 at 11:53
11

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.

Molecular Man
  • 22,277
  • 3
  • 72
  • 89
  • 1
    While I agree with you, I think this answer might be slightly misleading. My understanding is that if rather than creating an instance one uses xtype (that is, the object config), it won't be shared. Thus, in ExtJS 4 at least, there shouldn't be a problem having objects and arrays as config properties (compared to using InitComponent). Of course, if you need access to this or your class might be overridden by others or you need to merge configs, InitComponent is to be used. For more see: http://skirtlesden.com/articles/config-objects-on-the-prototype – Izhaki May 16 '12 at 15:24
  • What if you put it inside a "config {}" block? – Dave Dec 04 '12 at 00:49
  • one silly question I guess, but I would like to know what are non-premitive in extjs ? I know its arrays object etc.. but concept wise I am always confused to differentiate while creating an app in extjs 5. Does it harm the performance if I am not using `initComponent()` ?? I am a new in extjs btw. thanks – Aman Gupta Jul 22 '14 at 02:30
-1
  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();
    }
Kunal
  • 984
  • 4
  • 14
  • 33