ExtJS vs. Touch Config System

In this example I will demonstrate the difference between how ExtJS 4 and Sencha Touch 2 config systems treat non-primitives (i.e. arrays or objects). This aspect of the frameworks is very important to distinguish as it will save you from some very painful debugging sessions.

Long story short, Touch will actually clone any objects from the config for every instance of your class, whereas ExtJS will slap them on the prototype (probably not what you want).

Now for a practical example.

First of all it’s important that you understand the general concepts of JavaScript prototypical inheritance and object instantiation. Second, make sure you grasp the meaning of the Sencha ExtJS/Touch config aspect of the framework.

Consider the following basic class definition and a loop that follows:

Ext.define('MyClass', {
    extend: 'Ext.Base',
 
    config: {
        list: [],
        obj : { a: ''}
    },
 
    // Need in Touch but not ExtJS!
    constructor: function(options){this.initConfig(options);}
});
 
//... sometime later:
var inst, i;
 
for(i = 0; i < 5; i++) {
    inst = Ext.create('MyClass');
    inst.getList().push(i);
    inst.getObj().a += i;
}
 
Ext.Msg.alert('Status', 'Array: ' + inst.getList() + 
              '</br>Object: ' + inst.getObj().a);

What do you suspect the output would be? When this was first presented to me, I guessed “4”, having worked with Touch heavily for the past few months. And that turns out to be a correct answer for Touch:

And what about ExtJS?

So, why does this happen? Essentially, ExtJS’ config system assigns any objects from the “config” to the class’ prototype, similar as if you called them out in the actual class definition. So, in the last example all instance of MyClass are sharing the same instance of the array and the object from the original “config” in MyClass definition. If you were to debug around that loop in ExtJS, you would find the following to be true:

inst.getObj() === MyClass.prototype.obj

I hope this knowledge will save you some trouble! Here are the links to the Sencha’s Fiddles (such a great new product!), so feel free to play around:

Touch: https://fiddle.sencha.com/#fiddle/1ul
ExtJS: https://fiddle.sencha.com/#fiddle/1um