使用Sench Touch List itemTpl中的成员函数

Using member functions within Sench Touch List itemTpl

本文关键字:成员 函数 itemTpl Sench Touch List 使用      更新时间:2023-09-26

关于List的文档提到itemTpl遵循XTemplate语法。

我想在我的itemTpl中使用成员函数

如果我用XTemplate初始化itemTpl,并且成员函数没有参数,它可以工作:

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

但是一旦我试图传递一个参数(就像下面的两个例子),它就不再工作了:

            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'不是一个函数(求值'fm.helloWorld(values['name'])')

我想我不应该创建一个新的Ext.XTemplate对象。是否有任何解决方案来传递成员函数而不创建单独的XTemplate?

或者我应该放弃List并在模板中自己构建列表?

下面的代码应该可以工作:

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

您的第一个示例将工作,values.name而不仅仅是name

使用{[this.helloWorld(name)}代替{[this.helloWorld(values.name)}

这种用法也是可以的:

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