PDA

View Full Version : fire custom event on image el not working



xjscrafter
14 Jan 2014, 9:14 AM
I'm trying to fire a custom event on an image el so when the image is clicked the controller hears the event. But I get an error cmp.fireEvent() is not a function?


items: [
{
xtype: 'image',
itemId: 'graphiteChartCPU',
src: '',
listeners:{
'afterrender':function (el) {
el.getEl().on('click', function (cmp) {
cmp.fireEvent('cpuchartclicked');
});
}
}
}
]






me.application.on({
cpuchartclicked: this.onChartClicked,
scope: this
});

xjscrafter
14 Jan 2014, 1:55 PM
Anyone have ideas on this?

xjscrafter
14 Jan 2014, 2:08 PM
With the following, I am setting the scope for the on click handler. fireEvent() seems to be working now, but still not hearing the event in controller.


items: [
{
xtype: 'image',
itemId: 'graphiteChartCPU',
src: '',
listeners:{
'afterrender':function (comp) {
comp.getEl().on('click', function (el) {
alert('on click handler');
this.fireEvent('cpuchartclicked');
}, this);
}
}
}
]





// Listen Application Event
me.application.on({
cpuchartclicked: me.onChartClicked,
scope: me
});

evant
14 Jan 2014, 2:53 PM
There's no scope set on the afterrender event, so the "this" pointer inside the event will be the component.

Why are you trying to fire an event on the application? It should be the other way around. The component fires the event and the controller listens for it.

xjscrafter
14 Jan 2014, 3:20 PM
I have an ExtJS image component, but the image component does not respond to click events. When the image is clicked, I need a custom event to be fired, and then I need the controller to respond to that custom event.

xjscrafter
14 Jan 2014, 3:24 PM
This confirms the cpuchartclicked event is being fired, because the alert('hello') works.

What I need is to be able to respond to that event in my controller.


items: [
{
xtype: 'image',
itemId: 'graphiteChartCPU',
src: '',
listeners:{
'afterrender':function (comp) {
comp.getEl().on('click', function (el) {
this.fireEvent('cpuchartclicked');
}, this);
},
'cpuchartclicked':function () {
alert('hello');
}
}
}
]

xjscrafter
14 Jan 2014, 4:21 PM
Solved it, though I am wondering if this is the best way to do it.


I fire the custom event via the image, and then listen for that event on the image as well in the controller.



items: [
{
xtype: 'image',
itemId: 'graphiteChartCPU',
src: '',
listeners:{
'afterrender':function (comp) {
comp.getEl().on('click', function (el) {
this.fireEvent('cpuchartclicked');
}, this);
}
}
}
]







'myContainer image':
{
'cpuchartclicked': me.onChartClicked
}