Question

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?

Answer 1

The following code should work:

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

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