docs/source/Highlight.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-chart-Highlight'>/**
  19 </span> * @class Ext.chart.Highlight
  20  * A mixin providing highlight functionality for Ext.chart.series.Series.
  21  */
  22 Ext.define('Ext.chart.Highlight', {
  23
  24     /* Begin Definitions */
  25
  26     requires: ['Ext.fx.Anim'],
  27
  28     /* End Definitions */
  29
  30 <span id='Ext-chart-Highlight-property-highlight'>    /**
  31 </span>     * Highlight the given series item.
  32      * @param {Boolean/Object} Default's false. Can also be an object width style properties (i.e fill, stroke, radius)
  33      * or just use default styles per series by setting highlight = true.
  34      */
  35     highlight: false,
  36
  37     highlightCfg : null,
  38
  39     constructor: function(config) {
  40         if (config.highlight) {
  41             if (config.highlight !== true) { //is an object
  42                 this.highlightCfg = Ext.apply({}, config.highlight);
  43             }
  44             else {
  45                 this.highlightCfg = {
  46                     fill: '#fdd',
  47                     radius: 20,
  48                     lineWidth: 5,
  49                     stroke: '#f55'
  50                 };
  51             }
  52         }
  53     },
  54
  55 <span id='Ext-chart-Highlight-method-highlightItem'>    /**
  56 </span>     * Highlight the given series item.
  57      * @param {Object} item Info about the item; same format as returned by #getItemForPoint.
  58      */
  59     highlightItem: function(item) {
  60         if (!item) {
  61             return;
  62         }
  63
  64         var me = this,
  65             sprite = item.sprite,
  66             opts = me.highlightCfg,
  67             surface = me.chart.surface,
  68             animate = me.chart.animate,
  69             p, from, to, pi;
  70
  71         if (!me.highlight || !sprite || sprite._highlighted) {
  72             return;
  73         }
  74         if (sprite._anim) {
  75             sprite._anim.paused = true;
  76         }
  77         sprite._highlighted = true;
  78         if (!sprite._defaults) {
  79             sprite._defaults = Ext.apply({}, sprite.attr);
  80             from = {};
  81             to = {};
  82             for (p in opts) {
  83                 if (! (p in sprite._defaults)) {
  84                     sprite._defaults[p] = surface.availableAttrs[p];
  85                 }
  86                 from[p] = sprite._defaults[p];
  87                 to[p] = opts[p];
  88                 if (Ext.isObject(opts[p])) {
  89                     from[p] = {};
  90                     to[p] = {};
  91                     Ext.apply(sprite._defaults[p], sprite.attr[p]);
  92                     Ext.apply(from[p], sprite._defaults[p]);
  93                     for (pi in sprite._defaults[p]) {
  94                         if (! (pi in opts[p])) {
  95                             to[p][pi] = from[p][pi];
  96                         } else {
  97                             to[p][pi] = opts[p][pi];
  98                         }
  99                     }
 100                     for (pi in opts[p]) {
 101                         if (! (pi in to[p])) {
 102                             to[p][pi] = opts[p][pi];
 103                         }
 104                     }
 105                 }
 106             }
 107             sprite._from = from;
 108             sprite._to = to;
 109             sprite._endStyle = to;
 110         }
 111         if (animate) {
 112             sprite._anim = Ext.create('Ext.fx.Anim', {
 113                 target: sprite,
 114                 from: sprite._from,
 115                 to: sprite._to,
 116                 duration: 150
 117             });
 118         } else {
 119             sprite.setAttributes(sprite._to, true);
 120         }
 121     },
 122
 123 <span id='Ext-chart-Highlight-method-unHighlightItem'>    /**
 124 </span>     * Un-highlight any existing highlights
 125      */
 126     unHighlightItem: function() {
 127         if (!this.highlight || !this.items) {
 128             return;
 129         }
 130
 131         var me = this,
 132             items = me.items,
 133             len = items.length,
 134             opts = me.highlightCfg,
 135             animate = me.chart.animate,
 136             i = 0,
 137             obj, p, sprite;
 138
 139         for (; i &lt; len; i++) {
 140             if (!items[i]) {
 141                 continue;
 142             }
 143             sprite = items[i].sprite;
 144             if (sprite &amp;&amp; sprite._highlighted) {
 145                 if (sprite._anim) {
 146                     sprite._anim.paused = true;
 147                 }
 148                 obj = {};
 149                 for (p in opts) {
 150                     if (Ext.isObject(sprite._defaults[p])) {
 151                         obj[p] = {};
 152                         Ext.apply(obj[p], sprite._defaults[p]);
 153                     }
 154                     else {
 155                         obj[p] = sprite._defaults[p];
 156                     }
 157                 }
 158                 if (animate) {
 159                     //sprite._to = obj;
 160                     sprite._endStyle = obj;
 161                     sprite._anim = Ext.create('Ext.fx.Anim', {
 162                         target: sprite,
 163                         to: obj,
 164                         duration: 150
 165                     });
 166                 }
 167                 else {
 168                     sprite.setAttributes(obj, true);
 169                 }
 170                 delete sprite._highlighted;
 171                 //delete sprite._defaults;
 172             }
 173         }
 174     },
 175
 176     cleanHighlights: function() {
 177         if (!this.highlight) {
 178             return;
 179         }
 180
 181         var group = this.group,
 182             markerGroup = this.markerGroup,
 183             i = 0,
 184             l;
 185         for (l = group.getCount(); i &lt; l; i++) {
 186             delete group.getAt(i)._defaults;
 187         }
 188         if (markerGroup) {
 189             for (l = markerGroup.getCount(); i &lt; l; i++) {
 190                 delete markerGroup.getAt(i)._defaults;
 191             }
 192         }
 193     }
 194 });</pre>
 195 </body>
 196 </html>