Call a function in an ExtJS XTemplate

To call functions defined in the scope, you need to use the syntax:

{[this.functionName(values.valueName)]}

In your case, you can call:

'<img src="{[this.getThumbUrl(values.rawThumbUrl)]}"/>',

If you want to use a function defined outside of the template context, then remove this. from the function call.

Have a look at the XTemplate constructor API docs. There are lots of good examples there. Quoting:

Anything between {[ ... ]} is considered code to be executed in the scope of the template.

So you should be able to do something like:

'<img src={[this.getThumbUrl(rawThumbUrl)]} />',

Was trying to figure this out myself the other day and came across a solution for getting click events working. The short answer is you need to make use of the .defer function to setup event listeners after the template has been rendered.

Here's the example I found:

var resultTpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="search-item">',
            '<a id={[this.getLinkId()]} href="violation.aspx?violationid={slvha}">',
                '<img src="images/icons/home.gif" style="float:left;padding-right:2px">{number}&nbsp;{street}',
            '</a>',
            '<p>Owners:&nbsp;{owners}',
            '<br/>Flag Code:&nbsp;{flag}',
            '<br/>Number of Violations:&nbsp;[{summary}]</p>',
        '</div>',
    '</tpl>', {
    getLinkId: function(values) {
        var result = Ext.id();
        this.addListener.defer(1, this, [result]);
        return result;
    },
    addListener: function(id) {
        Ext.get(id).on('click', function(e){e.stopEvent(); alert('link ' + id + ' clicked');})
    }
});

Source