how to call a listener of view from controller in Extjs

Question

i have a bar chart in my view where i have a listener which is retrieving the bar column items ,now i have to call that listener from controller here is my code ...

This is the listener in my view..

listeners: {
    itemmousedown: function (obj) {
        alert(obj.storeItem.data['source'] + ' &' + obj.storeItem.data['count']);
    }
},

and i have to call this listener from my controller.here is my code..

init: function () {
    this.control({
        'barColumnChart': { //this is the id of the bar chart in my View
            click: function () {

            }
        }
    });
},

Answer 1

Have you tried using '#barColumnChart' as the selector? I'm a little rusty but I thought that's the way you get a element by its id inside the controller.

Answer 2

You don't "call" a listener, a listener is being called when an event is fired. So you should set the itemmousedown listener inside the controller, and remove it from the view. I don't know which view has the itemmousedown event, but if it is indeed the bar chart, it should look like this:

this.control({
    '#barColumnChart': { //this is the id of the bar chart in my View
        itemmousedown: function(obj) {
            alert(obj.storeItem.data['source'] + ' &' + obj.storeItem.data['count']);
        }
    }
});

If, however, the event is of another view, you should replace '#barColumnChart' with the id of the correct view (or another selector for that view)

Answer 3

If you create the listener into the controller, you won't have to create it into the view.
In the controller, you can create a reference to your view like this:

refs: [{
    ref     : 'barColumnChart',
    selector: 'your_view'
}
   }]  

Then create the function that will be called on item mouse down:

me.control({
'barColumnChart#your_chart': {
            click: me.your_function
        }
}),

your_function(button, e, options) {
        alert(obj.storeItem.data['source'] + ' &' + obj.storeItem.data['count']);
    }

Answer 4

The itemmousedown event is fired by the "series", and the series is not a component, and is only initialized by the chart after layout. So in order to get a reference to the series object we need to wait for the afterlayout event of the chart. But unfortunately the chart is not firing an afterlayout event... So, first override the afterComponentLayout method of chart, such that it fires the event:

Ext.define('MyNewChart',{
    extend: 'Ext.chart.Chart',
    afterComponentLayout: function(width, height, oldWidth, oldHeight) {
        this.callParent(arguments);
        this.fireEvent('afterlayout', this);
    }
});

Now, use our new chart class to create your chart:

Ext.create('MyNewChart', {
     id: 'myChart',
     ...
});

And now we can create a controller that actually create a listener on the itemmousedown event:

Ext.define('Gamma.controller.ControlFile', {
    extend : 'Ext.app.Controller',
    initializedEvents: false,
    init: function() {
        this.control({
            '#myChart': {
                afterlayout: this.afterChartLayout
            }
        });
    },
    afterChartLayout: function(){
        if(this.initializedEvents==true) return;
        this.initializedEvents=true;
        Ext.getCmp('myChart').series.items[0].on('itemmousedown',function(obj){
            console.log(obj);
        });
    }
});

Here is a working fiddle: http://jsfiddle.net/qjfBC/