The documentation about List mention that itemTpl follows the XTemplate syntax.

I would like to use member functions in my itemTpl

If I initialize itemTpl with an XTemplate and that the member function has no argument it works:

            items: {
            xtype: 'list',
            store: myStore,
            itemTpl: new Ext.XTemplate('<i>{name} {[this.hello()]}</i>', {
                hello: function () {
                    return 'Hello';
                }
            })

But as soon as I try to pass an argument (like in the two examples below) it does not work anymore:

            items: {
            xtype: 'list',
            store: myStore,
            itemTpl: new Ext.XTemplate('<i>{name} {[this.helloWorld(name)}</i>', {
                helloWorld: function (name) {
                    return 'Hello ' + name;
                }
            })


        items: {
            xtype: 'list',
            store: myStore,
            itemTpl: new Ext.XTemplate('<i>{name} {name:helloWorld}</i>', {
                helloWorld: function (string) {
                    return 'Hello ' + name;
                }
            })

TypeError: 'undefined' is not a function (evaluating 'fm.helloWorld(values['name'])')

I guess I should not create a new Ext.XTemplate object. Is there any solution to pass the member functions without creating a separate XTemplate?

Or should I give up on the List and build the list myself in the template?

The documentation about List mention that itemTpl follows the XTemplate syntax.

I would like to use member functions in my itemTpl

If I initialize itemTpl with an XTemplate and that the member function has no argument it works:

            items: {
            xtype: 'list',
            store: myStore,
            itemTpl: new Ext.XTemplate('<i>{name} {[this.hello()]}</i>', {
                hello: function () {
                    return 'Hello';
                }
            })

But as soon as I try to pass an argument (like in the two examples below) it does not work anymore:

            items: {
            xtype: 'list',
            store: myStore,
            itemTpl: new Ext.XTemplate('<i>{name} {[this.helloWorld(name)}</i>', {
                helloWorld: function (name) {
                    return 'Hello ' + name;
                }
            })


        items: {
            xtype: 'list',
            store: myStore,
            itemTpl: new Ext.XTemplate('<i>{name} {name:helloWorld}</i>', {
                helloWorld: function (string) {
                    return 'Hello ' + name;
                }
            })

TypeError: 'undefined' is not a function (evaluating 'fm.helloWorld(values['name'])')

I guess I should not create a new Ext.XTemplate object. Is there any solution to pass the member functions without creating a separate XTemplate?

Or should I give up on the List and build the list myself in the template?

• javascript
• sencha-touch
• extjs
• javascript-framework

3 Answers 3

The following code should work:

items: {
    xtype: 'list',
    store: myStore,
    itemTpl: new Ext.XTemplate(
         '<i>{name} {[this.helloWorld(values.name)]}</i>', 
         {
             piled: true,
             helloWorld: function (name) {
                 return 'Hello ' + name;
             }
         })
}

your first example would work, with values.name instead of just name

Use {[this.helloWorld(name)} instead of {[this.helloWorld(values.name)}

This usage is also ok:

itemTpl :new Ext.XTemplate( '<section class="movieListItem">',
                    '<img src="{UserLogo:this.showLogo}"/>',
                    '<h1>{NickName}</h1>',
                    '<div>{Content}</div>',
                    '</section>',
                    {
                        showLogo:function(value){

                            } 

                });