Question

我的一个视图上有一个饼图。饼图的系列配置如下：

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.
    //    }
    //}
}]

在控制器定义中，我有一个对此视图的引用，如下所示：

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

这就是我试图在控制器中添加itemmousedown事件的方式：

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
}

我确信必须有一件我想念的小事。有人可以指出哪里？

Answer 1

正如我在ExtJS 4.2.1的源代码中看到的那样，没有实现itemmousedown事件处理程序（OnItemMouseDown），因此永远不会处理该事件。以下是ExtJs 4.2.1中的代码片段，其中显示了绑定到其处理程序的事件：

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

我解决它的方式（我并不完全确定这是正确的还是最简单的方法）是通过扩展Series类并以下列方式添加处理程序：

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);
    }
});

您现在需要做的就是创建一个带有clickablecolumn类型

的图表系列

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

ExtJS饼图：不会从控制器触发itemmousedown事件

1 个答案: