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