CODEWITHSUNDEEP
extjsextjs4.2
user1640256
user1640256

Reputation: 1719

ExtJS: Distinguishing between left and right click event of column chart series

I am trying to accomplish right and left click(clicking on the series) functionality on the series of a column chart. The left click is going to fire an event whereas the right click is going to show a context menu. The left click is working fine but as soon as I right click on the series, left click is fired first then the context menu appears. How can I distinguish between those two clicks? This is the code I have written inside the series config for left click:

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

}]

Upvotes: 0

Views: 1926

Answers (1)

Ruan Mendes
Ruan Mendes

Reputation: 92274

It seems that Ext forgot to pass on the event object. You should consider filing a bug

Here's an override that will pass the original event as the second argument to your handler

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

});

Then your handler can do something like the following

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

Working example: https://fiddle.sencha.com/#fiddle/eh1

See also: https://developer.mozilla.org/en-US/docs/Web/API/event.button

Upvotes: 3

Related Questions