Why use Ext.apply in initComponent

Question

A lot of code examples use Ext.apply when setting properties on a component in the initComponent method.

Example :

    initComponent: function(){
        Ext.apply(this, {
            items: {
                xtype: 'button'
            }
    })},

My question is, what is the difference in doing it that way, compared to doing it this way :

    initComponent: function(){
        this.items = {
            xtype: 'button'
        }
    }

For me it seems more readable that way. But am I missing something that I get from Ext.apply?

Answer 1

Ext.apply() is used to simplify the copying of many properties from a source to a target object (most of the time the source and target objects have different sets of properties) and it can in addition be used to apply default values (third argument).

Note that it will not make deep clones! Meaning if you have a array or a object as property value it will apply the reference!

There is also a applyIf() which only copies properties that do not already exist in the target object. In some cases both implementations have also the benefit of dropping the reference of the copied object.

Note: Your second way won't work because you are missing this.

Answer 2

initComponent: function(){
    items = {
        xtype: 'button'
    }
}

wouldn't initialize anything, you mean

initComponent: function(){
    this.items = {
        xtype: 'button'
    }
}

which does the same like your example using Ext.apply. But Ext.apply shows its power in more complex cases, e.g.

var x = {a: 1, c:3, e:5};
Ext.apply(x, {b:2, d:4, f:6});

console.log(x); // Object {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}

This is often used to overwrite default options of components with given init parameters.