title: ExtJS How to add a click event to Pie Chart pieces
body: <p>I have created a Pie chart using the Pie chart example in sencha ExtJS website , I wanted to add a click event to the each Pie slice so that i get handle to the contextual data on that slice. I was able to add a click listener to the Pie but not sure how to get the data on the slice.</p>
  
  <p>Below is the ExtJS code.</p>
  
  <pre><code>Ext.onReady(function(){
  var store = Ext.create('Ext.data.JsonStore', {
      fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
      data: [{
          'name': 'January',
          'data1': 10
      }, {
          'name': 'February',
          'data1': 7
      }, {
          'name': 'March',
          'data1': 5
      }, {
          'name': 'April',
          'data1': 2
      }, {
          'name': 'May',
          'data1': 27
      }]
  });
  
  Ext.create('Ext.chart.Chart', {
      renderTo: Ext.getBody(),
      width: 800,
      height: 600,
      animate: true,
      store: store,
      theme: 'Base:gradients',
      legend: { // Pie Chart Legend Position
          position: 'right'
      },
      series: [{
          type: 'pie',
          field: 'data1',
          showInLegend: true,
          tips: {
              trackMouse: true,
              width: 140,
              height: 28,
              renderer: function(storeItem, item){
                  //calculate and display percentage on hover
                  var total = 0;
                  store.each(function(rec){
                      total += rec.get('data1');
                  });
                  this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
              }
          },
          highlight: {
              segment: {
                  margin: 5
              }
          },
          label: {
              field: 'name',
              display: 'rotate',
              contrast: true,
              font: '18px Arial'
          },
          listeners: {//This Doesnt Work :(
              itemclick: function(o){
                  alert('clicked at : ' + o);
              }
          }
  
      }],
      listeners: { //This Event handler works but I am not sure how to figure how which slice i have clicked ..................................
          click: {
  
              element: store, //bind to the underlying el property on the panel
              fn: function(o, a){
  
                  alert('clicked' + o + a + this);
              }
          }
  
      }
  
  });
  
  });
  </code></pre>
  
  <p>Kindly help.</p>
  
  <p>Regards,
  Lalit</p>