Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / 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>