Javascript 在ExtJS XTemplate中调用函数

我熟悉使用函数来确定使用xtemplate的特定条件，但不知道如何在没有条件if语句的情况下直接调用函数

例如，我的代码希望将一些字符附加到我在xtemplate中使用的字符串中。我认为最好的方法是在呈现xtemplate时附加字符

var myTpl = new Ext.XTemplate(
  '<tpl for=".">',

    '<tpl if="this.isThumbnailed(thumbnailed) == true">',

      '<img src=this.getThumbUrl(rawThumbUrl)/>', //this call to function does not work, also tried variations of this.

    '</tpl>',

  '</tpl>',

 {
  isThumbnailed : function(thumbnailed) {
    return ...;
  },
  getThumbUrl : function(rawThumbUrl) {
    //... //this function does not get called.
    return ...;
  }

 }
)

var myTpl=new Ext.XTemplate(
'',
'',
''，//此函数调用无效，也尝试了此函数的变体。
'',
'',
{
IsThumbnaild:函数（缩略图）{
返回。。。；
},
getThumbUrl:函数（rawtumbURL）{
//…//未调用此函数。
返回。。。；
}
}
)

看看API文档。这里有很多很好的例子。引述：

{[…]}之间的任何内容都被视为在模板范围内执行的代码

因此，您应该能够执行以下操作：

'<img src={[this.getThumbUrl(rawThumbUrl)]} />',

”，

前几天我自己也在尝试解决这个问题，并找到了一个让点击事件正常工作的解决方案。简而言之，在呈现模板后，您需要使用.defer函数来设置事件侦听器

var myTpl = new Ext.XTemplate(
  '<tpl for=".">',

    '<tpl if="this.isThumbnailed(thumbnailed) == true">',

      '<img src=this.getThumbUrl(rawThumbUrl)/>', //this call to function does not work, also tried variations of this.

    '</tpl>',

  '</tpl>',

 {
  isThumbnailed : function(thumbnailed) {
    return ...;
  },
  getThumbUrl : function(rawThumbUrl) {
    //... //this function does not get called.
    return ...;
  }

 }
)

以下是我发现的示例：

var resultTpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="search-item">',
            '<a id={[this.getLinkId()]} href="violation.aspx?violationid={slvha}">',
                '<img src="images/icons/home.gif" style="float:left;padding-right:2px">{number}&nbsp;{street}',
            '</a>',
            '<p>Owners:&nbsp;{owners}',
            '<br/>Flag Code:&nbsp;{flag}',
            '<br/>Number of Violations:&nbsp;[{summary}]</p>',
        '</div>',
    '</tpl>', {
    getLinkId: function(values) {
        var result = Ext.id();
        this.addListener.defer(1, this, [result]);
        return result;
    },
    addListener: function(id) {
        Ext.get(id).on('click', function(e){e.stopEvent(); alert('link ' + id + ' clicked');})
    }
});

var resultTpl=new Ext.XTemplate(
'',
'',
'',
“所有者：{Owners}”，
“
标志代码：{Flag}”，
“
违规次数：[{summary}]
”，
'',
'', {
getLinkId:函数（值）{
var result=Ext.id（）；
this.addListener.defer（1，this，[result]）；
返回结果；
},
addListener:函数（id）{
Ext.get（id）.on（'click'，函数（e）{e.stopEvent（）；警报（'link'+id+'clicked'）；}）
}
});

---

要调用范围中定义的函数，需要使用以下语法：

{[this.functionName(values.valueName)]}

在您的情况下，您可以拨打：

'<img src="{[this.getThumbUrl(values.rawThumbUrl)]}"/>',

”，

如果要使用在模板上下文之外定义的函数，请从函数调用中删除此。。

您可以：

• 直接引用值，例如

  {myValue}

• 将其传递给函数，例如

  {[this.myFunction（values.myValue）]}

下面是一个适用于所有版本的ExtJS的示例

var数据=[{
id:1，
子数据：{x:10，y:20}
}, {
id:2，
子数据：{x:20，y:30}
}];
var tpl=new Ext.XTemplate([
“
”，
'',
“
ID:{ID}或”，
{[“#”+this.pad（values.id，3，“0”）]}
，
“
”，
'',
“
x:{x}或”，
“{[this.frmtUnits（values.x）]}
”，
“
y:{y}或”，
“{[this.frmtUnits（values.y）]}
”，
'',
“
”，
'',
“
”，
{
pad：功能（s、n、c）{
if（typeof s！=='string'）s=''+s；
返回数学。abs（n）0？c+s:s+c，n，c）；
},
frmtUnits：功能（v）{
返回v+‘px’；
}
}
]);
Ext.onReady（函数（）{
新分机面板({
自动高度：正确，
html:tpl.apply（数据），
布局：“适合”，
样式：{padding:'2px'，margin:'2px'}，
renderTo:Ext.getBody（）
});
});
ulli{
线高：1.67em；
}
李斯潘{
字体大小：粗体；
}
李广生{
颜色：#D44；
}
李斯潘.fmt{
颜色：#44D；
}
谢谢，请注意，“values”是具有模板当前记录属性的变量。例如，values.birthDate等发现，如果函数是全局函数，则“”将执行tricki操作，我正在尝试相同的方法，但它在IE 11中不起作用。您知道吗？对于版本5及以后的版本，addListener可以写成：Ext.Function.defer（this.addListener，1，this，[result]）；