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?

@johan and @sra note the edit in OP - there's `.join('')` at the end of `itemTpl` - would that be a problem when including a function? — pepe, Sep 25 '12 at 18:55
As long as you run the template as XTemplate this should be no problem — sra, Sep 25 '12 at 19:12

zelexir · Accepted Answer · 2012-09-26T08:41:40.007

18

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).

edited Sep 26 '12 at 08:41

answered Sep 25 '12 at 21:25

zelexir

784
5
16

Absolutly +1 Can explain why this wan't work with member methods? – sra Sep 25 '12 at 21:58
Added info about member functions to the answer – zelexir Sep 25 '12 at 22:58
yep that worked like a charm - thx zelexir and @sra for your suggestions – pepe Sep 25 '12 at 23:22
Well, I am not able to get this to work when using member functions. Maybe you can provide a JSFiddle when you find some time, can't you? – sra Sep 26 '12 at 08:30
sra: Added fiddle examples for you and put a notice of the importance of closing tags – zelexir Sep 26 '12 at 08:42
Thanks a lot for taking your time to clarify this! I wish I could upvote this twice! – sra Sep 26 '12 at 09:20
For the last example, I had to use `itemTpl: new Ext.XTemplate(...),` otherwise I got an `XTemplate is undefined` error. – Amru E. Jan 21 '14 at 07:16

score 1 · Answer 2 · edited Dec 31 '14 at 11:36

1

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);
        }
    }
]

edited Dec 31 '14 at 11:36

Asken

7,679
10
45
77

answered Sep 25 '12 at 18:50

sra

23,820
7
55
89

@torr Well it need to be wrapped into '' I think but anyway, it seems to not work as expected, at least in my sandbox... I will continue testing it – sra Sep 25 '12 at 19:10
the `join` will mess up the use of `'` so it needs to be `"` instead when inside the function arguments... so that removes the error but I still can't get this to work... – pepe Sep 25 '12 at 19:30
@torr Me too. But I will need more time for this. Anyway is interest me, too. I thought that it would work this way – sra Sep 25 '12 at 19:36
thx @sra - FYI, I'm getting `Uncaught Error: [ERROR][Ext.XTemplate#apply] Cannot read property 'doAction' of undefined` which makes me wonder if `post_text_teaser` should be in braces? BTW I am using `return Ext.String.ellipsis(name + "," + 4);` instead of your code above – pepe Sep 25 '12 at 19:38

score 0 · Answer 3 · answered Sep 25 '12 at 18:52

0

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);
        }
    }
]

answered Sep 25 '12 at 18:52

Johan Haest

4,391
28
37

this solution gives me `Uncaught SyntaxError: Unexpected token , ` on the console :( -- the `,` is the one we're trying to escape – pepe Sep 25 '12 at 19:02

How to call functions within a XTemplate (itemTpl)

3 Answers3

Linked