Sencha Touch 2 : Manipulate model object by creating model methods

Today, we are going to see how to manipulate model objects by creating model methods. I came across a situation where i need to combine user firstName and lastName and display in the User Profile Page.

My Goal is, Instead of having string concatenation code duplicate in each and every  JS file. I thought of adding an utility method which will return the concatenated firstName and lastName. But why we need to have an utility method which does only string concatenation and also we need to pass firstName and lastName as parameters. How to achieve this Here is the solution.

Create a Model Class

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    config: {
        fields: [{
            name: 'firstname'
        }, {
            name: 'lastname'
        }, {
            name: 'email'
        }, {
            name: 'country'
        }]
    }
});

Create a Model Method

By creating the model method, we can dynamically concatenate user firstName and lastName and return the value. Here is the code

getUserName: function () {

    var firstName = this.get('firstname');
    var lastName = this.get('lastname');

    return lastName + ', ' + firstName;
}

Example:

var user = Ext.create('MyApp.model.User', {

    firstname: 'Suresh Kumar',
    lastname: 'Ariya',
    email: 'youremail@domain.com',
    country: 'india'
});

Ext.Msg.alert(user.getUserName());

First, i am creating an instance of the model class using Ext.create by passing data. Then i am calling model method getUserName() which will return the concatenated output in alert box. Here is the output, when i run the above code in Google Chrome.

Full Code:

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',

    config: {

        fields: [{
            name: 'firstname'
        }, {
            name: 'lastname'
        }, {
            name: 'email'
        }, {
            name: 'country'
        }]
    },

    getUserName: function () {

        var firstName = this.get('firstname');
        var lastName = this.get('lastname');

        return lastName + ', ' + firstName;
    }
});

Hope, you enjoyed this Post.