Call a function in an ExtJS XTemplate

Question

I'm familiar with using a function to determine a specific condition using xtemplate but not sure how to directly call a function without the conditional if statement.

My code, for example, wants to append some characters to a string that I am using within my xtemplate. I think the best way to do it is append the characters when the xtemplate is rendered.

var myTpl = new Ext.XTemplate(
  '<tpl for=".">',

    '<tpl if="this.isThumbnailed(thumbnailed) == true">',

      '<img src=this.getThumbUrl(rawThumbUrl)/>', //this call to function does not work, also tried variations of this.

    '</tpl>',

  '</tpl>',

 {
  isThumbnailed : function(thumbnailed) {
    return ...;
  },
  getThumbUrl : function(rawThumbUrl) {
    //... //this function does not get called.
    return ...;
  }

 }
)

Answer 1

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)]} />',

Answer 2

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.