/** * The ItemInfo interaction allows displaying detailed information about a series data * point in a popup panel. * * To attach this interaction to a chart, include an entry in the chart's * {@link Ext.chart.AbstractChart#interactions interactions} config with the `iteminfo` type: * * new Ext.chart.AbstractChart({ * renderTo: Ext.getBody(), * width: 800, * height: 600, * store: store1, * axes: [ ...some axes options... ], * series: [ ...some series options... ], * interactions: [{ * type: 'iteminfo', * listeners: { * show: function(me, item, panel) { * panel.setHtml('Stock Price: $' + item.record.get('price')); * } * } * }] * }); */Ext.define('Ext.chart.interactions.ItemInfo', { extend: 'Ext.chart.interactions.Abstract', type: 'iteminfo', alias: 'interaction.iteminfo', /** * @event show * Fires when the info panel is shown. * @param {Ext.chart.interactions.ItemInfo} this The interaction instance * @param {Object} item The item whose info is being displayed * @param {Ext.Panel} panel The panel for displaying the info */ config: { /** * @cfg {Object} extjsGestures * Defines the gestures that should trigger the item info panel to be displayed in ExtJS. */ extjsGestures: { 'start': { event: 'click', handler: 'onInfoGesture' }, 'move': { event: 'mousemove', handler: 'onInfoGesture' }, 'end': { event: 'mouseleave', handler: 'onInfoGesture' } } // TODO:ps The trigger above should be 'itemclick', not 'click'. }, item: null, onInfoGesture: function(e, element) { var me = this, item = me.getItemForEvent(e), tooltip = item && item.series.tooltip; if (tooltip) { tooltip.onMouseMove.call(tooltip, e); } if (item !== me.item) { if (item) { item.series.showTip(item); } else { me.item.series.hideTip(me.item); } me.item = item; } return false; } });