ExtJS5 vs ExtJS4 Config System

With ExtJS5 beta announced last week there were clear efforts on behalf of ExtJS 5 to behave closer to Sencha Touch in regards to utilizing the unique and powerful config system. Last year I wrote ExtJS vs. Touch Config System article to highlight some important differences. Today I’d like to explore this topic in the context of different versions of ExtJS 4 and ExtJS 5 beta.

The traditional way of assigning default properties to a new ExtJS class is by intercepting and modifying the config object in the constructor function:

Ext.define('Ext4Style', {
    extend      : 'Ext.Component',
    constructor : function(cfg) {
        var me = this;
        Ext.applyIf(cfg, {
            padding: 5,
            ...
        });
        me.callParent(arguments);
    }
});

As you can see it’s quite a bit of code that might seem confusing to a beginner, just to setup a default “padding: 5” property.

Sencha Touch has leveraged a powerful config system, which may have a lot more complexity going on in the background, but it does appear very simple on the surface, especially in this exact scenario:

Ext.define('Touch2Style', {
    extend: 'Ext.Component',
    config: {
        padding: 5
    }
});

…a lot easier to read, don’t you agree?

ExtJS has partially supported the config system, but not to the same extent as Sencha Touch. As I wrote in my ExtJS vs. Touch Config System article I noticed that ExtJS would “misuse” the config system by slapping properties on prototypes instead of instances. ExtJS5 promises to move towards the “good” direction of Sencha Touch, but as of beta I’m not seeing this yet. I put together an example using the following different types of configuration properties and tested them against different versions of ExtJS to see if the “prototype leakage” is still happening:

    padding     : 5,
    margin      : 10,
    newNumber   : 5,
    style       : 'background: cornflowerblue; color: white; text-align: center;',
    listeners   : {
        render: function() {
            console.log(this.$className + ' rendered');
        }
    },
    newObject   : {},
    stateEvents : ['zz'],
    newArray    : [3]

I was not having luck embedding iFrame for ExtJS 5.0.0.376, so just a screenshot for now:

Note how padding, but not margin, ends up on prototype in ExtJS 5; very weird. I was expecting to see none of these on the prototype.

ExtJS 4.x fiddles are embedded directly below from fiddle.sencha.com:

Notice how 4.2.1 config system is not propagating margin correctly to the blue component, but it is propagating padding correctly, even though both end up on the prototype.

Here we see 4.1.1 actually behaving better than 4.2.1 in regards to the margin propagating correctly to the blue component.

…and 4.0.7 completely fails to process the config system to the benefit of the (no longer) blue component.

Conclusion

As of Ext 5 beta I would not rely on the config system as I do with Sencha Touch. I would only use it if there’s some necessity; otherwise there’s just too much unpredictable behavior at the moment.

Links to the fiddles:

• ExtJS 5 beta: https://fiddle.sencha.com/#fiddle/579
• ExtJS 4.2: https://fiddle.sencha.com/#fiddle/57i
• ExtJS 4.1: https://fiddle.sencha.com/#fiddle/57j
• ExtJS 4.0: https://fiddle.sencha.com/#fiddle/57k