CODEWITHSUNDEEP
javascriptextjscharts
Coderino Javarino
Coderino Javarino

Reputation: 2896

Extjs 6 adding chart mouse listener

I am making a bar chart, and I want to so that clicking it would toggle between shortening long labels and not. However the listener does not seem to be working. I googled around and found a lot of people talking about it being a bug, however those posts are on old version (5) and I don't know if that still holds. Here is complete chart class:

Ext.define ('SenchaApp.view.barchart.BarChart', {

    extend : 'Ext.chart.CartesianChart',
    requires : [ 'SenchaApp.store.Personnel' ],
    xtype : 'bar_chart',
    reference : 'bar_chart',
    itemId : 'bar_chart',

    plugins: {
        ptype: 'chartitemevents',
        moveEvents: true
    },

    store : {
        type : 'personnel'
    },

    label_length : 10,
    shorten_labels : true,

    flipXY : true,

    axes: [{
                type: 'numeric',
                position: 'bottom',
                fields: 'phone',
                title: {
                    text: 'Inventory',
                    fontSize: 15
                },
                grid: {
                    odd: {
                        fillStyle: 'rgba(255, 255, 255, 0.06)'
                    },
                    even: {
                        fillStyle: 'rgba(0, 0, 0, 0.03)'
                    }
                },
            }, {
                type: 'category',
                position: 'left',
                title: {
                    text: 'People',
                    fontSize: 15
                },
                fields: 'name',
                label : {
                    hidden : false
                },



                renderer : function (axis, data) {
                    var str = data;
                    var chart = axis.getChart();
                    if (str.length > chart.label_length && chart.shorten_labels) {
                    str = str.substring(0, chart.label_length-1)+"...";
            }
            return str;
                },
                style: {
                estStepSize : 1
            }
    }],
        series: {
            type: 'bar',
                xField: 'name',
                yField: 'phone',

                listeners: {
                itemtap : function(series) {
                        var chart = series.getChart();
                        alert('mouse down event');
                        chart.shorten_labels = !chart_shorten_labels;
                }
            }
        },

        initComponent : function () {           
            this.callParent(arguments); 
            this.axes[1].override_label_bbox (true, 2);
        }


})

Upvotes: 1

Views: 1171

Answers (1)

Alexander
Alexander

Reputation: 20244

First step if a listener doesn't work as expected: read the listener docs carefully:

Fires when a tap event occurs on a series item. Note: This event requires the Ext.chart.plugin.ItemEvents plugin be added to the chart.

Second step is a look in the Sencha code to find the following:

    chart.addElementListener({
        click: handleEvent,
        dblclick: handleEvent,
        mousedown: handleEvent,
        mousemove: handleEvent,
        mouseup: handleEvent,
        mouseover: handleEvent,
        mouseout: handleEvent,
        // run our handlers before user code 
        priority: 1001,
        scope: this
    });

together with

handleEvent: function (e) {
    ...
        chart.fireEvent('item' + e.type, chart, item, e);
        item.series.fireEvent('item' + e.type, item.series, item, e);

tap event isn't registered, so itemtap cannot be fired at all. If you bind to itemclick, on the other hand...

It's working!

Upvotes: 2

Related Questions