Results 1 to 8 of 8

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

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    12
    Vote Rating
    0
      0  

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

    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?
    Code:
    Ext.define('MyApp.LoginWindow',{
        extend:'Ext.Window',
    
        title:'Log in',
    
       initComponent:function(){
            Ext.apply(this,{
                items:[
                    {
                        xtype: 'textfield',
                        name : 'username',
                       fieldname: 'Username'
                    },
                    ...
                ]});
    }});
    Code:
    Ext.define('MyApp.LoginWindow',{
       extend:'Ext.Window',
    
        title:'Log in',
    
        items : [
            // as above
        ]
    
        initComponent:function(){
            ...
        }
    });

  2. 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.

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    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.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    12
    Vote Rating
    0
      0  

    Default

    Thanks! It definitely makes sense.

  5. #4
    Sencha User PulpMysteryFan's Avatar
    Join Date
    Aug 2008
    Posts
    98
    Answers
    1
    Vote Rating
    3
      0  

    Default

    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! :-)

  6. #5
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    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.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  7. #6
    Sencha User PulpMysteryFan's Avatar
    Join Date
    Aug 2008
    Posts
    98
    Answers
    1
    Vote Rating
    3
      0  

    Default

    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?
    Code:
    initComponent: function(){
    this.items = [{xtype: 'textfield', name: , name: 'username'}]; ...
    }
    versus
    Code:
    initComponent: function(){
    Ext.apply(this, {items: [{xtype: 'textfield', name: , name: 'username'}]}); ...
    }
    Thanks for the help! :-)

  8. #7
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,790
    Answers
    583
    Vote Rating
    391
      0  

    Default

    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

  9. #8
    Sencha User PulpMysteryFan's Avatar
    Join Date
    Aug 2008
    Posts
    98
    Answers
    1
    Vote Rating
    3
      0  

    Default

    Excellent article skirtle. Thanks!

    :-)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •