extjs4 - ExtJS How to add a click event to Pie Chart pieces -

i have created pie chart using pie chart example in sencha extjs website , wanted add click event each pie slice handle contextual data on slice. able add click listener pie not sure how data on slice.

below extjs 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 , 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 @ : ' + o);             }         }      }],     listeners: { //this event handler works not sure how figure how slice have clicked ..................................         click: {              element: store, //bind underlying el property on panel             fn: function(o, a){                  alert('clicked' + o + + this);             }         }      }  });  }); 

kindly help.

regards, lalit

here how data of clicked slice. series class supports listeners via observable syntax , are:

1. itemmouseup when user interacts marker.
2. itemmousedown when user interacts marker.
3. itemmousemove when user iteracts marker.
4. afterrender triggered when animation ends or when series has been rendered completely.

i make use of itemmousedown event capture clicked slice. here listener method:

series: [{         .     .     .     listeners:{         itemmousedown : function(obj) {         alert(obj.storeitem.data['name'] + ' &' + obj.storeitem.data['data1']);     }     }     . }] 

note have placed listener inside series , not chart! now, obj variable holds lot of information. each series, property data differ. so, have inspect object using firebug or other developer tool.

now, in case of piecharts, can slice information using obj:

obj.storeitem.data['your-series-variable-name'] 

here obj firebug..