Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Callout.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-Callout'>/**
19 </span> * @class Ext.chart.Callout
20  * A mixin providing callout functionality for Ext.chart.series.Series.
21  */
22 Ext.define('Ext.chart.Callout', {
23
24     /* Begin Definitions */
25
26     /* End Definitions */
27
28     constructor: function(config) {
29         if (config.callouts) {
30             config.callouts.styles = Ext.applyIf(config.callouts.styles || {}, {
31                 color: &quot;#000&quot;,
32                 font: &quot;11px Helvetica, sans-serif&quot;
33             });
34             this.callouts = Ext.apply(this.callouts || {}, config.callouts);
35             this.calloutsArray = [];
36         }
37     },
38
39     renderCallouts: function() {
40         if (!this.callouts) {
41             return;
42         }
43
44         var me = this,
45             items = me.items,
46             animate = me.chart.animate,
47             config = me.callouts,
48             styles = config.styles,
49             group = me.calloutsArray,
50             store = me.chart.store,
51             len = store.getCount(),
52             ratio = items.length / len,
53             previouslyPlacedCallouts = [],
54             i,
55             count,
56             j,
57             p;
58             
59         for (i = 0, count = 0; i &lt; len; i++) {
60             for (j = 0; j &lt; ratio; j++) {
61                 var item = items[count],
62                     label = group[count],
63                     storeItem = store.getAt(i),
64                     display;
65                 
66                 display = config.filter(storeItem);
67                 
68                 if (!display &amp;&amp; !label) {
69                     count++;
70                     continue;               
71                 }
72                 
73                 if (!label) {
74                     group[count] = label = me.onCreateCallout(storeItem, item, i, display, j, count);
75                 }
76                 for (p in label) {
77                     if (label[p] &amp;&amp; label[p].setAttributes) {
78                         label[p].setAttributes(styles, true);
79                     }
80                 }
81                 if (!display) {
82                     for (p in label) {
83                         if (label[p]) {
84                             if (label[p].setAttributes) {
85                                 label[p].setAttributes({
86                                     hidden: true
87                                 }, true);
88                             } else if(label[p].setVisible) {
89                                 label[p].setVisible(false);
90                             }
91                         }
92                     }
93                 }
94                 config.renderer(label, storeItem);
95                 me.onPlaceCallout(label, storeItem, item, i, display, animate,
96                                   j, count, previouslyPlacedCallouts);
97                 previouslyPlacedCallouts.push(label);
98                 count++;
99             }
100         }
101         this.hideCallouts(count);
102     },
103
104     onCreateCallout: function(storeItem, item, i, display) {
105         var me = this,
106             group = me.calloutsGroup,
107             config = me.callouts,
108             styles = config.styles,
109             width = styles.width,
110             height = styles.height,
111             chart = me.chart,
112             surface = chart.surface,
113             calloutObj = {
114                 //label: false,
115                 //box: false,
116                 lines: false
117             };
118
119         calloutObj.lines = surface.add(Ext.apply({},
120         {
121             type: 'path',
122             path: 'M0,0',
123             stroke: me.getLegendColor() || '#555'
124         },
125         styles));
126
127         if (config.items) {
128             calloutObj.panel = Ext.create('widget.panel', {
129                 style: &quot;position: absolute;&quot;,    
130                 width: width,
131                 height: height,
132                 items: config.items,
133                 renderTo: chart.el
134             });
135         }
136
137         return calloutObj;
138     },
139
140     hideCallouts: function(index) {
141         var calloutsArray = this.calloutsArray,
142             len = calloutsArray.length,
143             co,
144             p;
145         while (len--&gt;index) {
146             co = calloutsArray[len];
147             for (p in co) {
148                 if (co[p]) {
149                     co[p].hide(true);
150                 }
151             }
152         }
153     }
154 });
155 </pre>
156 </body>
157 </html>