How to call functions within a XTemplate (itemTpl)

Question

I would like to use Ext's String method on some text that will be output to the view.

For example:

itemTpl: [
    ...
    '<tpl switch="post_type">',
    '<tpl case="new_user">',
        '<p>{post_text_teaser}</p>',
        '<p>{timestamp}</p>',
    '<tpl default>',
        '<p>' + Ext.String.ellipsis( + '{post_text_teaser}' + \, 4) + '</p>',
    ...
].join(''),

but of course the concatenation in line 10 is illegal.

Do you know if it's possible or how to do this correctly?

Answer 1

This should solve your problem:

    '<tpl switch="post_type">',
        '<tpl case="new_user">',
            '<p>{post_text_teaser}</p>',
            '<p>{timestamp}</p>',
        '<tpl default>',
            '<p>{[Ext.String.ellipsis(values.post_text_teaser,4,false)]}</p>',
    '</tpl>'

you can find more information about the XTemplate at Sencha Docs

The thing with template member function is that as far as I know you cannot define them directly in the itemTpl in the regular way, but need to explicitly define a new XTemplate and then use that in your itemTpl. See example:

var tpl = new XTemplate(
    '<tpl switch="post_type">',
        '<tpl case="new_user">',
            '<p>{post_text_teaser}</p>',
            '<p>{timestamp}</p>',
        '<tpl default>',
            '<p>{[this.shorten(values.post_text_teaser)]}</p>',
    '</tpl>',
    {        
        shorten: function(name){
           return Ext.String.ellipsis(name,4,false);
        }
    }
);

...

itemTpl: tpl,

...

Senchafiddle example

This should work fine as will the code below (just insert the code from the XTemplate above).

itemTpl: new XTemplate(...),

Senchafiddle example

Hope that this sortens it out!

edit noticed that I hade missed the closing tags, sometimes it works without them, but it's good practice to always use them as they could cause interesting errors (in this case a missing bracket on the generated code).

Answer 2

Note: The example below does not work as expected! Look at zelexir answer for clarification!

You can use memberfunctions

itemTpl: [
    ...
    '<tpl switch="post_type">',
    '<tpl case="new_user">',
        '<p>{post_text_teaser}</p>',
        '<p>{timestamp}</p>',
    '<tpl default>',
        '<p>{[this.doAction(post_text_teaser)]}</p>',
    ...,
    {
        // XTemplate configuration:
        disableFormats: true,
        // member functions:
        doAction: function(name){
           return Ext.String.ellipsis(name + "\", 4);
        }
    }
]

Answer 3

You can use a function inside a template

itemTpl: [
    ...
    '<tpl switch="post_type">',
    '<tpl case="new_user">',
        '<p>{post_text_teaser}</p>',
        '<p>{timestamp}</p>',
    '<tpl default>',
        '<p>{[this.concatenate(values.post_text_teaser)]}</p>',
    ...,
    {
        concatenate: function(teaser) {
               return Ext.String.ellipsis( + teaser + \, 4);
        }
    }
]