Ext.define('WeatherPoint', {
    extend: 'Ext.data.Model',
    fields: ['temperature', 'date']
});

var chartMenu = Ext.create('Ext.menu.Menu', {
    items: [{
        text: 'Add',
        handler: function() {
            console.log("Add");
        }
    }, {
        text: 'Delete',
        handler: function() {
            console.log("Delete");
        }
    }]
});

var store = Ext.create('Ext.data.Store', {
    model: 'WeatherPoint',
    data: [{
        temperature: 58,
        date: new Date(2011, 1, 1, 8)
    }, {
        temperature: 63,
        date: new Date(2011, 1, 1, 9)
    }, {
        temperature: 73,
        date: new Date(2011, 1, 1, 10)
    }, {
        temperature: 78,
        date: new Date(2011, 1, 1, 11)
    }, {
        temperature: 81,
        date: new Date(2011, 1, 1, 12)
    }]
});

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 300,
    store: store,
    axes: [{
        title: 'Temperature',
        type: 'numeric',
        position: 'left',
        fields: ['temperature'],
        minimum: 0,
        maximum: 100
    }, {
        title: 'Time',
        type: 'time',
        position: 'bottom',
        fields: ['date'],
        dateFormat: 'ga'
    }],
    series: [{
        type: 'line',
        xField: 'date',
        yField: 'temperature'
    }],
    listeners: {
        afterrender: function() {
            var me = this,
            el = me.getEl();

            // the surface items havn't been added yet, so we wait
            setTimeout(function() {
                var sprites = me.surface.items.items,
                   len = sprites.length,
                   i;

                // add class to the sprites for delegation purposes
                for (i = 0; i < len; i++) {
                    sprites[i].addCls('chart-sprite');
                }

                // add a contextmenu listener for sprite clicks
                el.on('contextmenu', function(e) {
                    e.stopEvent();

                    chartMenu.showAt(e.getXY());
                }, null, {
                    delegate: '.chart-sprite'
                });
            }, 0);
        }
    }
});