1. #1
    Sencha User
    Join Date
    Mar 2010
    Location
    Seattle, WA
    Posts
    137
    Answers
    2
    Vote Rating
    1
    wprater is on a distinguished road

      0  

    Default Answered: Difference between update and apply magic methods

    Answered: Difference between update and apply magic methods


    I've seen them both used in the source, but the docs state the new class system uses the applyConfigName magic method and does not mention the updateConfigName method. These seem to be generated with the #initConfig method.

    Insights are appreciated!

  2. The properties in the config Object automatically create the getter and setter functions for those properties. For instance, say I have a Button like this:

    Code:
    Ext.define('My.Button', {
        extend : 'Ext.Button',
        xtype  : 'mybutton',
    
        config : {
            action : 'delete'
        }
    });
    It will create the getAction and setAction methods. All the getAction does is return the action property on the button, simple. The setAction also sets the action property but quite a lot of times you need to do other things other than just setting the property, this is where the apply and update methods are used.

    So you created an instance of the button but want to change the action using the setAction like this:

    Code:
    button.setAction('SAVE');
    This is what happens... you execute the setAction, it will first check to see if there is the applyAction method and if so it will execute it passing in the value you past setAction. In this method, you can do different things to transform the value like maybe we want to make sure the text is always lower case. In the apply action, you need to return the transformed value:

    Code:
    applyAction: function(action) {
        return action.toLowerCase();
    }
    After the apply method has been fired and it returned the transformed value, the property is then set on the button. But what if we need to take action after the property has been set? This is where the update method comes in. I normally use this for updating DOM elements but you can do whatever the need requires you to do. Let's change the ui of the button based on action:

    Code:
    updateAction: function(action) {
        var ui;
    
        if (action === 'save') {
            ui = 'confirm';
        } else if (action === 'delete') {
            ui = 'decline';
        }
    
        this.setUi(ui);
    }
    Pretty much the workflow of the setter method. To finalize the button code all in one this is what it would look like:

    Code:
    Ext.define('My.Button', {
        extend : 'Ext.Button',
        xtype  : 'mybutton',
    
        config : {
            action : 'delete'
        },
    
        applyAction: function(action) {
            return action.toLowerCase();
        },
    
        updateAction: function(action) {
            var ui;
    
            if (action === 'save') {
                ui = 'confirm';
            } else if (action === 'delete') {
                ui = 'decline';
            }
    
            this.setUi(ui);
        }
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      2  

    Default


    The properties in the config Object automatically create the getter and setter functions for those properties. For instance, say I have a Button like this:

    Code:
    Ext.define('My.Button', {
        extend : 'Ext.Button',
        xtype  : 'mybutton',
    
        config : {
            action : 'delete'
        }
    });
    It will create the getAction and setAction methods. All the getAction does is return the action property on the button, simple. The setAction also sets the action property but quite a lot of times you need to do other things other than just setting the property, this is where the apply and update methods are used.

    So you created an instance of the button but want to change the action using the setAction like this:

    Code:
    button.setAction('SAVE');
    This is what happens... you execute the setAction, it will first check to see if there is the applyAction method and if so it will execute it passing in the value you past setAction. In this method, you can do different things to transform the value like maybe we want to make sure the text is always lower case. In the apply action, you need to return the transformed value:

    Code:
    applyAction: function(action) {
        return action.toLowerCase();
    }
    After the apply method has been fired and it returned the transformed value, the property is then set on the button. But what if we need to take action after the property has been set? This is where the update method comes in. I normally use this for updating DOM elements but you can do whatever the need requires you to do. Let's change the ui of the button based on action:

    Code:
    updateAction: function(action) {
        var ui;
    
        if (action === 'save') {
            ui = 'confirm';
        } else if (action === 'delete') {
            ui = 'decline';
        }
    
        this.setUi(ui);
    }
    Pretty much the workflow of the setter method. To finalize the button code all in one this is what it would look like:

    Code:
    Ext.define('My.Button', {
        extend : 'Ext.Button',
        xtype  : 'mybutton',
    
        config : {
            action : 'delete'
        },
    
        applyAction: function(action) {
            return action.toLowerCase();
        },
    
        updateAction: function(action) {
            var ui;
    
            if (action === 'save') {
                ui = 'confirm';
            } else if (action === 'delete') {
                ui = 'decline';
            }
    
            this.setUi(ui);
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Mar 2010
    Location
    Seattle, WA
    Posts
    137
    Answers
    2
    Vote Rating
    1
    wprater is on a distinguished road

      0  

    Default


    Great response! I could not find the class creator in the source folder for ST2. The code appears to be in the concatenated source, but not the individual source files.

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Check out the EventedBase.js file, the Class.addMember about half way down is where this happens.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha - Ext JS Dev Team
    Join Date
    Jul 2012
    Posts
    28
    Answers
    1
    Vote Rating
    0
    vitalyx is on a distinguished road

      0  

    Default What wouldn't update method be invoked?

    What wouldn't update method be invoked?


    Is the updateProperty() method being invoked each time we set a property via setProperty() or there is some extra logic to it?

    I'm trying to use setGrouper() on a store, but only applyGrouper is called as a result, but not the updateGrouper(). Why this behavior? I'm pretty sure the new grouper is different from the old one.

  7. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The updater will get called as long as the value is not undefined. So if you execute the setter with a valid value, it hits the applier but not the updater that would tell me the applier is not returning a value.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #7
    Sencha - Ext JS Dev Team
    Join Date
    Jul 2012
    Posts
    28
    Answers
    1
    Vote Rating
    0
    vitalyx is on a distinguished road

      0  

    Default


    In this case the applier is the standard method of the Ext.data.Store


    Code:
    applyGrouper: function(grouper) {
            if (typeof grouper == 'string') {
                grouper = {
                    property: grouper
                };
            }
            else if (typeof grouper == 'function') {
                grouper = {
                    groupFn: grouper
                };
            }
    
    
            grouper = Ext.factory(grouper, Ext.util.Grouper, this.getGrouper());
            return grouper;
        }


    and it does return a value.
    Also, the setter is given a perfectly valid value, which is an object.


    I actually already found the reason for this error and submitted a bug report:


    http://www.sencha.com/forum/showthre...oldValue-check

  9. #8
    Sencha User
    Join Date
    Jun 2009
    Posts
    43
    Answers
    3
    Vote Rating
    0
    minamu1 is on a distinguished road

      0  

    Default Excellent answer

    Excellent answer


    I had spent quite some time reading about this in the Class System docs, list object docs, the complicated datamap setup and the cryptic apply/update code with little understanding, until I finally found this. The selected "Best Answer" should be in the Sencha docs, added to the "The Class System" topic for ST (would probably apply to ExtJS as well).

  10. #9
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,083
    Answers
    24
    Vote Rating
    44
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  

    Default


    get/set/apply/update is covered fully in the official training courses ;-) (hint hint)
    Teahouse Training Company
    Official Certified Sencha Trainer

    Australia / New Zealand / Singapore / Hong Kong & APAC



    SenchaWorld.com - Sencha webinars, videos, etc
    SenchaForge.org - (coming soon)
    TeahouseHQ.com - Sencha ecosystem training portal

    Code Validation : JSLint | JSONLint | JSONPLint