Javascript 在 ExtJS XTemplate 中调用函数

Call a function in an ExtJS XTemplate

提问by Snowright

I'm familiar with using a function to determine a specific condition using xtemplate but not sure how to directly call a function without the conditional if statement.

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

My code, for example, wants to append some characters to a string that I am using within my xtemplate. I think the best way to do it is append the characters when the xtemplate is rendered.

例如，我的代码想要将一些字符附加到我在 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 ...;
  }

 }
)

回答by Brian Moeskau

Have a look at the XTemplate constructorAPI docs. There are lots of good examples there. Quoting:

查看XTemplate 构造函数API 文档。那里有很多很好的例子。引用：

Anything between {[ ... ]} is considered code to be executed in the scope of the template.

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

So you should be able to do something like:

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

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

回答by Matt

To call functions defined in the scope, you need to use the syntax:

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

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

In your case, you can call:

在您的情况下，您可以致电：

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

If you want to use a function defined outside of the template context, then remove this.from the function call.

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

回答by CoreyLoose

Was trying to figure this out myself the other day and came across a solution for getting click events working. The short answer is you need to make use of the .defer function to setup event listeners after the template has been rendered.

前几天试图自己解决这个问题，并遇到了一个让点击事件正常工作的解决方案。简短的回答是您需要在模板渲染后使用 .defer 函数来设置事件侦听器。

Here's the example I found:

这是我找到的示例：

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

来源

回答by Mr. Polywhirl

You can either:

您可以：

• Reference the value directly e.g. {myValue}
• Pass it to a function e.g. {[this.myFunction(values.myValue)]}.

• 直接引用值，例如 {myValue}
• 将它传递给一个函数，例如{[this.myFunction(values.myValue)]}。

Below is an example that works with all versions of ExtJS.

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

var data = [{
    id: 1,
    subdata: { x: 10, y: 20 }
}, {
    id: 2,
    subdata: { x: 20, y: 30 }
}];

var tpl = new Ext.XTemplate([
    '<ul>',
    '<tpl for=".">',
        '<li>ID: <span class="raw">{id}</span> or ',
            '<span class="fmt">{["#" + this.pad(values.id, 3, "0")]}</span></li>',
        '<ul>',
        '<tpl for="subdata">',
            '<li>x: <span class="raw">{x}</span> or ',
                '<span class="fmt">{[this.frmtUnits(values.x)]}</span></li>',
            '<li>y: <span class="raw">{y}</span> or ',
                '<span class="fmt">{[this.frmtUnits(values.y)]}</span></li>',
        '</tpl>',
        '</ul>',
    '</tpl>',
    '</ul>',
    {
     pad : function(s, n, c) {
            if (typeof s !== 'string') s = '' + s;
            return Math.abs(n) <= s.length ? s : this.pad(n > 0 ? c + s : s + c, n, c);
        },
        frmtUnits : function(v) {
            return v + 'px';
        }
    }
]);

Ext.onReady(function () {
    new Ext.Panel({
        autoHeight: true,
        html: tpl.apply(data),
        layout: 'fit',
        style: { padding: '2px', margin: '2px' },
        renderTo: Ext.getBody()
    });
});

ul li {
    line-height: 1.67em;
}
li span {
    font-weight: bold;
}
li span.raw {
    color: #D44;
}
li span.fmt {
    color: #44D;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all-debug.js"></script>