javascript - 如何从 Ext.Template 和 Ext.apply 方法执行本地方法

Question

我想在 Ext.Template 上下文中执行本地方法。

该方法应该是类中的成员。

我尝试了以下代码，但它不起作用。

有人知道我可以将函数成员传递给 onClick 事件吗？

    requires: ['Ext.XTemplate'],
    alias : 'widget.countlinkcolumn',
    func: 'this.handleFilter'
    renderer: function(val,metaData,rec,b,c,d,f){
        var categoryId = 3;
        var colTemplate = new Ext.Template(
            '<div class="drill_down_link grid_cell_link" style="cursor: pointer; float:right" onclick="{on_click}({categoryId})">{text}</div>' +
            '</div>');

        var tpl = colTemplate.apply({
            text: text,
            categoryId: categoryId,
            on_click: this.func,
        });
        return tpl;
    },

    handleFilter: function (categoryId) {
        console.log(categoryId);
    }, 
});

Answer 1

从未找到解决此问题的简单方法...XTemplate 无法直接从中调用 ExtJS 代码(它实际上已经在 DOM 中呈现) )...

我们发现的解决方法是在 View 中渲染 XTemplate(但您可以使用 apply() 来实现)，然后监听itemClick 事件。

在监听器中，我们获取 DOM 元素，并且可以从属性中获取一些附加数据(例如:data-categoryId):

xtype: 'view',
listeners: {
    itemClick: 'onItemClick',
}
// Additional attribute (data-categoryId) that store the categoryId
tpl: '<div data-categoryId="{categoryId}" class="drill_down_link">{text}</div>'

然后在监听器中，我们可以在检查单击正确的按钮后使用此附加属性(通过他的 class 名称，但您可以使用其他属性)

onItemClick: function(dataView, record, item, index, e, removeAll){
    var me = this,
        target = e && e.target,
        targetClass = target && target.getAttribute("class");

    //Clicked on link (identified by his class name)
    var isLink = targetClass && targetClass.indexOf("drill_down_link") >= 0;
    if(isLink){
        // Get the attribute value we setted in the XTemplate
        var categoryId = target.getAttribute('data-categoryId');
    }
}