在 tpl 中单击时 ExtJS 4.2 自定义组件触发事件 link
ExtJS 4.2 Custom Component fire event when click in a tpl link
我有一个带有 link 到 html tpl 的自定义组件,当我单击此 link 时,我需要该组件触发一个事件,以便我在控制器中收听。
代码:
分机
Ext.define("Ext.ux.newpanel.NewPanel", {
extend: 'Ext.Component',
...
tpl: [
'<div class="title center"><p>{title}</p></div>',
'<div class="content center">',
'<div class="number center"><h1>{qtd}</h1></div>',
'<div class="ind left">',
'{ind}',
'</div>',
'</div>',
'<div class="more">',
'<a href="#" class="clickme">See all...</a>',
'</div>'
],
...
我已经尝试使用委托创建侦听器,但我无法将组件范围放入侦听器中。
代码:
..
listeners: {
// Add the listener to the component's main el
el: {
delegate: '.clickme',
click: function(ev, li) {
// need to fire event in component here
}
}
},
...
需要在 "clickme" class 中触发事件。
谢谢!
解决方法:
cmp.el.on('click', function(event, target) {
cmp.fireEvent('openRel', cmp);
}, null, {delegate: 'a'});
这是对这个答案的一点修改:
How do you attach click events to ExtJS template elements?
需要获取组件的DOM,然后将点击事件委托给标签。
我有一个带有 link 到 html tpl 的自定义组件,当我单击此 link 时,我需要该组件触发一个事件,以便我在控制器中收听。
代码:
分机
Ext.define("Ext.ux.newpanel.NewPanel", {
extend: 'Ext.Component',
...
tpl: [
'<div class="title center"><p>{title}</p></div>',
'<div class="content center">',
'<div class="number center"><h1>{qtd}</h1></div>',
'<div class="ind left">',
'{ind}',
'</div>',
'</div>',
'<div class="more">',
'<a href="#" class="clickme">See all...</a>',
'</div>'
],
...
我已经尝试使用委托创建侦听器,但我无法将组件范围放入侦听器中。 代码:
..
listeners: {
// Add the listener to the component's main el
el: {
delegate: '.clickme',
click: function(ev, li) {
// need to fire event in component here
}
}
},
...
需要在 "clickme" class 中触发事件。
谢谢!
解决方法:
cmp.el.on('click', function(event, target) {
cmp.fireEvent('openRel', cmp);
}, null, {delegate: 'a'});
这是对这个答案的一点修改: How do you attach click events to ExtJS template elements?
需要获取组件的DOM,然后将点击事件委托给标签。