icloudtweetdeckhipchattelegramhangoutsslackgmailskypefacebook-workplaceoutlookemailmicrosoft-teamsdiscordmessengercustom-servicesmacoslinuxwindowsinboxwhatsapp
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
2.3 KiB
75 lines
2.3 KiB
/** |
|
* 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; |
|
} |
|
|
|
});
|
|
|