Extjs5官方可运行实例Ticket App

/** * @class Ext.chart.Callout * A mixin providing callout functionality for Ext.chart.series.Series. */ Ext.define('Ext.chart.Callout', { /* Begin Definitions */ /* End Definitions */ constructor: function(config) { if (config.callouts) { config.callouts.styles = Ext.applyIf(config.callouts.styles || {}, { color: "#000", font: "11px Helvetica, sans-serif" }); this.callouts = Ext.apply(this.callouts || {}, config.callouts); this.calloutsArray = []; } }, renderCallouts: function() { if (!this.callouts) { return; } var me = this, items = me.items, animate = me.chart.animate, config = me.callouts, styles = config.styles, group = me.calloutsArray, store = me.chart.getChartStore(), len = store.getCount(), ratio = items.length / len, previouslyPlacedCallouts = [], i, count, j, p, item, label, storeItem, display; for (i = 0, count = 0; i < len; i++) { for (j = 0; j < ratio; j++) { item = items[count]; label = group[count]; storeItem = store.getAt(i); display = (!config.filter || config.filter(storeItem)); if (!display && !label) { count++; continue; } if (!label) { group[count] = label = me.onCreateCallout(storeItem, item, i, display, j, count); } for (p in label) { if (label[p] && label[p].setAttributes) { label[p].setAttributes(styles, true); } } if (!display) { for (p in label) { if (label[p]) { if (label[p].setAttributes) { label[p].setAttributes({ hidden: true }, true); } else if(label[p].setVisible) { label[p].setVisible(false); } } } } if (config && config.renderer) { config.renderer(label, storeItem); } me.onPlaceCallout(label, storeItem, item, i, display, animate, j, count, previouslyPlacedCallouts); previouslyPlacedCallouts.push(label); count++; } } this.hideCallouts(count); }, onCreateCallout: function(storeItem, item, i, display) { var me = this, group = me.calloutsGroup, config = me.callouts, styles = (config ? config.styles : undefined), width = (styles ? styles.width : 0), height = (styles ? styles.height : 0), chart = me.chart, surface = chart.surface, calloutObj = { //label: false, //box: false, lines: false }; calloutObj.lines = surface.add(Ext.apply({}, { type: 'path', path: 'M0,0', stroke: me.getLegendColor() || '#555' }, styles)); if (config.items) { calloutObj.panel = new Ext.Panel({ style: "position: absolute;", width: width, height: height, items: config.items, renderTo: chart.el }); } return calloutObj; }, hideCallouts: function(index) { var calloutsArray = this.calloutsArray, len = calloutsArray.length, co, p; while (len-->index) { co = calloutsArray[len]; for (p in co) { if (co[p]) { co[p].hide(true); } } } } }); /** * A composite Sprite handles a group of sprites with common methods to a sprite * such as `hide`, `show`, `setAttributes`. These methods are applied to the set of sprites * added to the group. * * CompositeSprite extends {@link Ext.util.MixedCollection} so you can use the same methods * in `MixedCollection` to iterate through sprites, add and remove elements, etc. * * In order to create a CompositeSprite, one has to provide a handle to the surface where it is * rendered: * * var group = Ext.create('Ext.draw.CompositeSprite', { * surface: drawComponent.surface * }); * * Then just by using `MixedCollection` methods it's possible to add {@link Ext.draw.Sprite}s: * * group.add(sprite1); * group.add(sprite2); * group.add(sprite3); * * And then apply common Sprite methods to them: * * group.setAttributes({ * fill: '#f00' * }, true); */ Ext.define('Ext.draw.CompositeSprite', { /* Begin Definitions */ extend: 'Ext.util.MixedCollection', mixins: { animate: 'Ext.util.Animate' }, autoDestroy: false, /* End Definitions */ isCompositeSprite: true, /** * @event * @inheritdoc Ext.draw.Sprite#mousedown */ /** * @event * @inheritdoc Ext.draw.Sprite#mouseup */ /** * @event * @inheritdoc Ext.draw.Sprite#mouseover */ /** * @event * @inheritdoc Ext.draw.Sprite#mouseout */ /** * @event * @inheritdoc Ext.draw.Sprite#click */ constructor: function(config) { var me = this; Ext.apply(me, config); me.id = Ext.id(null, 'ext-sprite-group-'); me.callParent(); }, // @private onClick: function(e) { this.fireEvent('click', e); }, // @private onMouseUp: function(e) { this.fireEvent('mouseup', e); }, // @private onMouseDown: function(e) { this.fireEvent('mousedown', e); }, // @private onMouseOver: function(e) { this.fireEvent('mouseover', e); }, // @private onMouseOut: function(e) { this.fireEvent('mouseout', e); }, attachEvents: function(o) { var me = this; o.on({ scope: me, mousedown: me.onMouseDown, mouseup: me.onMouseUp, mouseover: me.onMouseOver, mouseout: me.onMouseOut, click: me.onClick }); }, // Inherit docs from MixedCollection add: function(key, o) { var result = this.callParent(arguments); this.attachEvents(result); return result; }, insert: function(index, key, o) { return this.callParent(arguments); }, // Inherit docs from MixedCollection remove: function(o) { var me = this; o.un({ scope: me, mousedown: me.onMouseDown, mouseup: me.onMouseUp, mouseover: me.onMouseOver, mouseout: me.onMouseOut, click: me.onClick }); return me.callParent(arguments); }, /** * Returns the group bounding box. * Behaves like {@link Ext.draw.Sprite#getBBox} method. * @return {Object} an object with x, y, width, and height properties. */ getBBox: function() { var i = 0, sprite, bb, items = this.items, len = this.length, infinity = Infinity, minX = infinity, maxHeight = -infinity, minY = infin