Attaching events to chart components

1. Start by defining a model for the data we are loading into the chart:
Ext.define('Chart', {
extend: 'Ext.data.Model',
fields: [{
name: 'name',
type: 'string'
}, {
name: 'value',
type: 'int'
}]
});

2. Create a store with an AJAX proxy. Set autoLoad: true to load the
data automatically:
var store = Ext.create('Ext.data.Store', {
model: 'Chart',
proxy: {
type: 'ajax',
url: 'BarChart.json',
reader: {
type: 'json',
root: 'data'
}
},
autoLoad: true
});

3. Create a basic chart rendered to the document's body. Give it a Numeric and
Category axis and set a bar series:
var chart = Ext.create('Ext.chart.Chart', {
width: 600,
height: 400,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['value'],
title: 'Value'
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Name'
}],
series: [{
type: 'bar',
axis: 'bottom',
xField: 'name',
yField: 'value'
}],
style: 'margin: 50px',
renderTo: Ext.getBody()
});

6. To demonstrate this working in a line chart change the series to the following:
var chart = Ext.create('Ext.chart.Chart', {
...
series: [{
type: 'line',
axis: 'left',
xField: 'name',
yField: 'value',
listeners: {
itemmousedown: function(item){
console.log('Mouse Pressed');
},
itemmouseup: function(item){
console.log('Mouse Up');
},
itemmouseout: function(item){
console.log('Mouse Out');
},
itemmouseover: function(item){
console.log('Mouse Over');
}
}
}],
...
});