Extjs 6グラフマウスリスナーを追加

Question

私は棒グラフを作成しています。これをクリックすると、長いラベルを短くするかどうかを切り替えることができます。しかし、リスナーは動作していないようです。私は周りのグーグルで見つけたが、それはバグであると話している多くの人が見つかりましたが、それらの投稿は古いバージョン（5）にあります。予想通り、リスナーが動作しない場合

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


}) 

Answer 1

まずステップ：ここでは、完全なグラフクラスで慎重the listener docsをお読みください。

火災をタップイベントはシリーズアイテムに発生したとき。 注：このイベントでは、Ext.chart.plugin.ItemEventsプラグインを追加する必要があります。

第2のステップは以下のことを見つけるために見てin the Sencha codeです：

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

一緒

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

tapでイベントが登録されていないので、itemtapは全く解雇することはできません。あなたが...一方、itemclickに

It's working!