ExtJS:区分柱形图系列的左右键事件

时间:2014-12-04 13:24:44

标签: extjs extjs4.2

我正在尝试在柱形图系列上完成右键和左键单击(单击系列)功能。左键单击将触发事件,而右键单击将显示上下文菜单。左键单击工作正常,但是当我右键单击该系列时,首先触发左键单击,然后出现上下文菜单。如何区分这两次点击?这是我在左键单击的系列配置中编写的代码:

series:[{
.
.
.
listeners: {
              itemmousedown: function (_chart, e) {//function being called on both the clicks.
              //need to distinguish between left and right click
              var _item = _chart.storeItem.data.EmployeeName;
              //further functionality
              }
            }

}]

1 个答案:

答案 0 :(得分:3)

Ext似乎忘了传递事件对象。您应该考虑提交错误

这里有一个覆盖,它将原始事件作为第二个参数传递给你的处理程序

Ext.define('FixSeriesItemMouseDown', {
    override: 'Ext.chart.Chart',

    onMouseDown: function(e) {
        var me = this,
            position = me.getEventXY(e),
            seriesItems = me.series.items,
            i, ln, series,
            item;

        if (me.enableMask) {
            me.mixins.mask.onMouseDown.call(me, e);
        }


        for (i = 0, ln = seriesItems.length; i < ln; i++) {
            series = seriesItems[i];
            if (Ext.draw.Draw.withinBox(position[0], position[1], series.bbox)) {
                if (series.getItemForPoint) {
                    item = series.getItemForPoint(position[0], position[1]);
                    if (item) {
                        // <bug-fix>Pass event
                        series.fireEvent('itemmousedown', item, e);
                        // </bug-fix>
                    }
                }
            }
        }
    }

});

然后您的处理程序可以执行以下操作

listeners: {
    itemmousedown: function(item, e){
       var click = {0: 'left', 1:'middle', 2: 'right'};
        alert(click[e.button] + ' click on ' + item.value);
    }
},

工作示例:https://fiddle.sencha.com/#fiddle/eh1

另请参阅:https://developer.mozilla.org/en-US/docs/Web/API/event.button