在ExtJS XTemplate中调用函数

Question

我熟悉使用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 ...;
  }

 }
)

Answer 1

请看一下XTemplate constructor应用编程接口文档。这里有很多很好的例子。引用：

{ ... }之间的任何内容都被认为是在模板范围内执行的代码。

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

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

Answer 2

要调用在作用域中定义的函数，需要使用以下语法：

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

在您的情况下，您可以调用：

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

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

Answer 3

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

下面是我找到的例子：

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

Source