Threaded View

  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);
        }
    });