I have a bar column chart in a container. I made this chart using MVC. Now I want to add a click event on the chart so that when I click on the column of the chart, the value of the corresponding column will be displayed. This event should be placed in the controller... But, I cant do this.. please help me... This is my view .


var baseColor = 'rgb(0,0,0)';


var colors = ['url(#v-1)',
'url(#v-2)',
'url(#v-3)',
'url(#v-4)',
'url(#v-5)'];


Ext.define('Ext.chart.theme.Fancy', {
extend: 'Ext.chart.theme.Base',

constructor: function(config) {
this.callParent([Ext.apply({
axis: {
fill: baseColor,
stroke: baseColor
},
axisLabelLeft: {
fill: baseColor
},
axisLabelBottom: {
fill: baseColor
},
axisTitleLeft: {
fill: baseColor
},
axisTitleBottom: {
fill: baseColor
},
colors: colors
}, config)]);
}
});


var bar=Ext.define('Gamma.view.BarColumnChart', {
extend : 'Ext.chart.Chart',
alias : 'widget.barColumnChart',
title:'barChart',
height:300,
width:Ext.getBody().getViewSize().width*0.6,

xtype : 'chart',
theme : 'Fancy',
animate : {
easing : 'bounceOut',
duration : 750
},
store : 'BarColumn',
background : {
fill : 'none'
},
gradients : [ {
'id' : 'v-1',
'angle' : 0,
stops : {
0 : {
color : 'rgb(212, 40, 40)'
},
100 : {
color : 'rgb(117, 14, 14)'
}
}
}, {
'id' : 'v-2',
'angle' : 0,
stops : {
0 : {
color : 'rgb(180, 216, 42)'
},
100 : {
color : 'rgb(94, 114, 13)'
}
}
}, {
'id' : 'v-3',
'angle' : 0,
stops : {
0 : {
color : 'rgb(43, 221, 115)'
},
100 : {
color : 'rgb(14, 117, 56)'
}
}
}, {
'id' : 'v-4',
'angle' : 0,
stops : {
0 : {
color : 'rgb(45, 117, 226)'
},
100 : {
color : 'rgb(14, 56, 117)'
}
}
}, {
'id' : 'v-5',
'angle' : 0,
stops : {
0 : {
color : 'rgb(187, 45, 222)'
},
100 : {
color : 'rgb(85, 10, 103)'
}
}
} ],
axes : [ {
type : 'Numeric',
position : 'left',
fields : [ 'count' ],
minimum : 0,
maximum : 3000,
label : {
renderer : Ext.util.Format.numberRenderer('0,0')
},
grid : {
odd : {
stroke : '#555'
},
even : {
stroke : '#555'
}
}
}, {
type : 'Category',
position : 'bottom',
fields : [ 'source' ]
} ],
series : [ {
type : 'column',
axis : 'left',
seriesId: 'col',
highlight : true,
label : {
display : 'insideEnd',
'text-anchor' : 'middle',
field : 'count',
orientation : 'horizontal',
fill : '#fff',
font : '12px Arial'
},
renderer : function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % colors.length];
return barAttr;
},
style : {
opacity : 0.95
},
xField : 'source',
yField : 'count'
} ]
});


and this is my controller

Ext.define('Gamma.controller.ControlFile', {

extend : 'Ext.app.Controller',

//define the stores
stores : ['BarColumn','RadarView','VoiceCallStore','SMSCallStore','MMSCallStore','GPRSUsageStore'],
//define the models
models : ['BarCol','radar','VoiceCallModel','SMSCallModel','MMSCallModel','GPRSUsageModel'],
//define the views
views : ['BarColumnChart','LineChart','RadarChart','VoicePie','SMSPie','MMSPie','GPRSPie'],


init : function() {

this.control({

})
}
});