PDA

View Full Version : Chart Series listener MVC



jc5
28 Sep 2011, 5:42 PM
The Ext.chart.series.Series (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.chart.series.Series) has a few options for listeners and they work fine when defined within a view, but how can they be defined in a controller? I can't seem to figure out the correct selector.

Thanks,
Jamie

barnabe
2 Oct 2011, 7:27 AM
Hi, jc5,

I have the same problem.:-/
Have you found a solution?

Best regards,
barnabe.

jc5
3 Oct 2011, 9:05 AM
For now I just have the listener defined in the view itself. I haven't found any way to define it within the controller.

Regards,
Jamie

barnabe
4 Oct 2011, 4:42 AM
Hi, jamie,

I found a way to declare the listener on controller.
With the help of kef4e on this thread (http://www.sencha.com/forum/showthread.php?140284-help-on-MVC-with-chart-clickable-event&p=656033#post656033), we can do this on 'afterrender' event of the chart.


this.control({
'chart ': {
afterrender: function (chart,o){
//set the load mask if you want
new Ext.LoadMask(chart.getEl(), {
msg: 'Loading..',
store: chart.store
});
//add listeners
var series = chart.series.getAt(0); // do this for every series in the chart....loop ? :)
series.listeners = {
itemmouseup: function(item) {
// Do whatever you are going to do here...
}
}
}
}
});


Best regards.:)

jc5
5 Oct 2011, 3:43 AM
Hi barnabe,

Thanks for looking out.

Regards,
Jamie

jc5
5 Oct 2011, 5:58 AM
Hi barnabe,

This does work for you? I see it added into the object, but the event will not fire for me. Maybe it's an issue on my part...

Regards,
Jamie



Hi, jamie,

I found a way to declare the listener on controller.
With the help of kef4e on this thread (http://www.sencha.com/forum/showthread.php?140284-help-on-MVC-with-chart-clickable-event&p=656033#post656033), we can do this on 'afterrender' event of the chart.


this.control({
'chart ': {
afterrender: function (chart,o){
//set the load mask if you want
new Ext.LoadMask(chart.getEl(), {
msg: 'Loading..',
store: chart.store
});
//add listeners
var series = chart.series.getAt(0); // do this for every series in the chart....loop ? :)
series.listeners = {
itemmouseup: function(item) {
// Do whatever you are going to do here...
}
}
}
}
});


Best regards.:)

barnabe
7 Oct 2011, 9:07 AM
Hi, Jamie,

maybe you should try


series.on('itemmouseup',function (item){
// Do whatever you are going to do here...
});

in place of


series.listeners = {
itemmouseup: function(item) {
// Do whatever you are going to do here...
}
}

Actually, only the last worked for me, but kaf4e suggested the first way.

Regards.

barnabe
7 Oct 2011, 9:28 AM
Hi, Jamie,

I remembered something else.
When I put the code with brackets,


series.listeners = [{
itemmouseup: function (item) {
// Do whatever you are going to do here...
}
}]

the event was added to the object, but it was not fired.
When I put the code without brackets, it worked.

Regards,
Leonardo.

jc5
7 Oct 2011, 11:25 AM
Ok, I'll get it a try again when I get a chance and keep you posted. Once again, thanks for the help.

Regards,
Jamie

pgrandmont
15 Nov 2011, 12:06 PM
My solution for this:
I have put a listener in the series that fire an event a the chart level



listeners: {
itemmousedown: function (obj) {
this.chart.fireEvent('itemClick', obj);


}
}


and in the init component I add the event to the chart


initComponent: function () {
this.addEvents('itemClick');


this.callParent();
},


then in the controller I register an action to do on the itemClick


this.control({
'displayChart': {
itemClick: this.onItemSelect
}
});


PS: the display chart is the view that define the chart with the series