Using XTemplate Functions to Manipulate Data in Sencha Touch

If you’ve been using Sencha Touch then you will have likely created a list at some point. When creating a list you will usually define an itemTpl that describes how to display the data like this:

Ext.define('MyApp.view.MyList', {
  extend: 'Ext.dataview.List',
  xtype: 'mylist',

  config: {
    store: 'MyStore',
    itemTpl: '{first_name}{last_name}',
  },
});

With this set up, the list will create a list item containing the first_name and last_name fields for each record in the data store. The result may look something like this:

• Stephen King
• Roland Deschain
• Eddie Dean

We can make minor alterations to this format – we could easily put the last name first instead or add some extra data for example. But we are quite restricted with what we can do, if we wanted to only display the first initial of the first name like this:

• S King
• R Deschain
• E Dean

We would be out of luck. This is where the Ext.XTemplate class comes in. XTemplate’s allow us to do a lot of interesting things when defining the itemTpl, one of which is passing the data through a function before displaying it. To use an XTemplate for your itemTpl you can use the following code:

Ext.define('MyApp.view.MyList', {
  extend: 'Ext.dataview.List',
  xtype: 'mylist',

  config: {
    store: 'MyStore',
    itemTpl: new Ext.XTemplate(['{first_name}{last_name}']),
  },
});

Now we want to create a function that will trim the first_name field to only include the first letter. We can define and make a call to this function within the XTemplate:

Ext.define('MyApp.view.MyList', {
    extend: 'Ext.dataview.List',
    xtype: 'mylist',

    config: {
        store: "MyStore",
        itemTpl: new Ext.XTemplate([
            '{[this.getFirstCharacter(values.first_name)]}{last_name}'
            ]
            {
                getFirstCharacter: function(name){
                    return name.charAt(0);
                }
            }
        )
    }

});

We are passing the value in to the function by replacing {first_name} with {[this.getFirstCharacter(values.first_name]}. The value is then run through the function, and whatever that function returns (in this case, the first character) will be displayed in the list. The values object contains all the data for that record, so rather than passing in the first_name specifically we could also pass in all of the values to that function.

Let’s take a look at doing just that, but also adding another function. This time we will make a function that checks if the first name is longer than the last name.

Ext.define('MyApp.view.MyList', {
    extend: 'Ext.dataview.List',
    xtype: 'mylist',

    config: {
        store: "MyStore",
        itemTpl: new Ext.XTemplate([
            '{[this.getFirstCharacter(values.first_name)]}{[this.determineLongest(values)]}'
            ]
            {
                getFirstCharacter: function(name){
                    return name.charAt(0);
                },

                determineLongest: function(values){
                    if(values.first_name.length > values.last_name.length){
                        return values.last_name + " - First name longer";
                    }
                    else
                    {
                        return values.last_name + " - Last name longer";
                    }
                }
            }
        )
    }

});

Now we are using both values inside the one function. The result should look like this:

• S King – First name longer
• R Deschain – Last name longer
• E Dean – First name longer

These are very simple examples but as you can probably see there’s a lot you can do with this. It’s also not limited to altering the displayed data, you could also use it to determine which CSS class should be applied to a div element for example. There is a lot more than you can do with XTemplates as well which I will cover in future tutorials.