ExtJS pie chart: itemmousedown event not getting fired from controller

Question

I have a pie chart on one of my view. The series config of pie chart goes like this:

itemId: 'employeeSalaryChart',
.
.
.
series: [{
    type: 'pie',
    angleField: 'Salary',
    showInLegend: true,
    donut: 20,
    tips: {
        trackMouse: true,
        width: 225,
        height: 28,
        renderer: function(storeItem, item) {
            this.setTitle(storeItem.get('EmployeeName') + ': $' + Ext.util.Format.number(storeItem.get('Salary'), '0,000'));
        }
    },
    label: {
        field: 'EmployeeName',
        display: 'rotate',
        contrast: false,
        renderer: function(value, label, storeItem) {
            return '$' + Ext.util.Format.number(storeItem.get('Salary'), '0,000');
        }
    }
    //listeners: {
    //    itemmousedown: function (pieChart, e) {
    //        var storeItem = allEmployeeStore.getAt(pieChart.index);
    //        This piece of code is working here.
    //    }
    //}
}]

Inside the controller definition I have a reference for this view like this:

refs: [{
    ref: 'EmployeeSalaryPanel',
    selector: 'employeesalary'
}],

And this is how I am trying to add itemmousedown event in the controller:

init: function() {
    var me = this;
    me.control({
        'employeesalary #employeeSalaryChart': {
            //'employeesalary #employeeSalaryChart series' too not working
            itemmousedown: me.SelectEmployee
        }
    });
},
SelectEmployee: function(pieChart, e){
  //Unable to get here
}

I am sure there has to be a small thing that I am missing. Can someone point out where?

Dušan Knežević Dušan Knežević · Accepted Answer · 2015-04-09T14:03:41

As i can see in the source code for ExtJS 4.2.1, itemmousedown event handler (OnItemMouseDown) is not implemented, so the event will never be handled. Here is the code snippet from the ExtJs 4.2.1 that shows events that are bound to their handlers:

me.on({
    scope: me,
    itemmouseover: me.onItemMouseOver,
    itemmouseout: me.onItemMouseOut,
    mouseleave: me.onMouseLeave
});

The way i solved it (and I am not completely sure if this is the right nor the easiest way) is by extending the Series class and adding the handler in the following way:

Ext.define('MyApp.extension.ClickableColumnSeries', {
    extend: 'Ext.chart.series.Column',
    alias: 'series.clickablecolumn',
    type: 'clickablecolumn',

    constructor: function (config) {
        this.callParent(arguments);
        var me = this;
        me.on({
            scope: me,
            itemclick: me.onItemMouseClick
        });
    },
    onItemMouseClick: function (item) {
        this.chart.fireEvent('itemclick', item);
    }
});

All you need to do now is create a chart series with clickablecolumn type

series: [{
    type: 'clickablecolumn',
    ...
}]

ExtJS pie chart: itemmousedown event not getting fired from controller

1 Answers