What's the point in Ext.apply()?

[masm]

Sorry, for the newcomer's stupid question, but I don't get what's the point in Ext.apply()?

If it just copies provided properties to the specified object, what's the difference between following two snippets?

Ext.define('MyApp.LoginWindow',{
    extend:'Ext.Window',

    title:'Log in',

   initComponent:function(){
        Ext.apply(this,{
            items:[
                {
                    xtype: 'textfield',
                    name : 'username',
                   fieldname: 'Username'
                },
                ...
            ]});
}});

Ext.define('MyApp.LoginWindow',{
   extend:'Ext.Window',

    title:'Log in',

    items : [
        // as above
    ]

    initComponent:function(){
        ...
    }
});

[mitchellsimoens]

In the 2nd one, you run the risk of those items being shared among all instances of that class. The first will always create a new array so the items are unique to each instance.

[masm]

Thanks! It definitely makes sense.

[PulpMysteryFan]

It does not make sense to me. Can you elaborate on how the second alternative can lead to the items being shared among all instances of the class? Thanks! :-)

[mitchellsimoens]

Objects and Arrays when used are not like strings and booleans... they are just references to the actual Object and Array in the browser. So if you use the same object in 3 places and only update it in one of the places, the other two will reflect the change.

[PulpMysteryFan]

Sorry to be dense, but... I understand that arrays are objects. I don't see how that relates to the example at hand.

I stared at it for a while, and here's a difference I see. In the example, using Ext.apply() in initConfig() results in the items property being overritten with the specified values, regardless of what the calling routine passes as the config object's items attribute. In the example without Ext.apply(), the calling routine's values will be used. So this use of apply is good in those cases where you need to ignore the calling routine's values. Is that right?

How about setting this.items to the array in initComponent()? Does Ext.apply() differ from that?

initComponent: function(){
this.items = [{xtype: 'textfield', name: , name: 'username'}];
...
}

versus

initComponent: function(){
Ext.apply(this, {items: [{xtype: 'textfield', name: , name: 'username'}]});
...
}

Thanks for the help! :-)

[skirtle]

The two examples you have posted are effectively the same. In the second of the original examples the items array was specified directly as part of the Ext.define, which results in it being copied to the class's prototype. That array is created immediately and is shared. This is different to creating the array in initComponent, which happens for each instance. Sharing an array or object is not necessarily a problem but obviously there can be issues if 2 objects share the same object/array to hold some aspect of their state.

Some further information on this topic:

http://skirtlesden.com/articles/conf...-the-prototype

[PulpMysteryFan]

Excellent article skirtle. Thanks!

:-)