/** * 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} gestures * Defines the gestures that should trigger the item info panel to be displayed. */ gestures: { tap: 'onInfoGesture' }, /** * @cfg {Object} panel * An optional set of configuration overrides for the {@link Ext.Panel} that gets * displayed. This object will be merged with the default panel configuration. */ panel: { modal: true, centered: true, width: 300, height: 200, scrollable: 'vertical', hideOnMaskTap: true, fullscreen: false, hidden: false, zIndex: 30 } }, item: null, applyPanel: function(panel, oldPanel) { return Ext.factory(panel, 'Ext.Panel', oldPanel); }, updatePanel: function(panel, oldPanel) { if (panel) { panel.on('hide', "reset", this); } if (oldPanel) { oldPanel.un('hide', "reset", this); } }, onInfoGesture: function(e, element) { var me = this, panel = me.getPanel(), item = me.getItemForEvent(e); if (item) { me.item = item; me.fireEvent('show', me, item, panel); Ext.Viewport.add(panel); panel.show('pop'); item.series.setAttributesForItem(item, { highlighted: true }); me.sync(); } return false; }, reset: function() { var me = this, item = me.item; if (item) { item.series.setAttributesForItem(item, { highlighted: false }); me.item = null; me.sync(); } }});