Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / docs / source / CompositeSprite2.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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../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-draw-CompositeSprite'>/**
19 </span> * @class Ext.draw.CompositeSprite
20  * @extends Ext.util.MixedCollection
21  *
22  * A composite Sprite handles a group of sprites with common methods to a sprite
23  * such as `hide`, `show`, `setAttributes`. These methods are applied to the set of sprites
24  * added to the group.
25  *
26  * CompositeSprite extends {@link Ext.util.MixedCollection} so you can use the same methods
27  * in `MixedCollection` to iterate through sprites, add and remove elements, etc.
28  *
29  * In order to create a CompositeSprite, one has to provide a handle to the surface where it is
30  * rendered:
31  *
32  *     var group = Ext.create('Ext.draw.CompositeSprite', {
33  *         surface: drawComponent.surface
34  *     });
35  *                  
36  * Then just by using `MixedCollection` methods it's possible to add {@link Ext.draw.Sprite}s:
37  *  
38  *     group.add(sprite1);
39  *     group.add(sprite2);
40  *     group.add(sprite3);
41  *                  
42  * And then apply common Sprite methods to them:
43  *  
44  *     group.setAttributes({
45  *         fill: '#f00'
46  *     }, true);
47  */
48 Ext.define('Ext.draw.CompositeSprite', {
49
50     /* Begin Definitions */
51
52     extend: 'Ext.util.MixedCollection',
53     mixins: {
54         animate: 'Ext.util.Animate'
55     },
56
57     /* End Definitions */
58     isCompositeSprite: true,
59     constructor: function(config) {
60         var me = this;
61         
62         config = config || {};
63         Ext.apply(me, config);
64
65         me.addEvents(
66             'mousedown',
67             'mouseup',
68             'mouseover',
69             'mouseout',
70             'click'
71         );
72         me.id = Ext.id(null, 'ext-sprite-group-');
73         me.callParent();
74     },
75
76     // @private
77     onClick: function(e) {
78         this.fireEvent('click', e);
79     },
80
81     // @private
82     onMouseUp: function(e) {
83         this.fireEvent('mouseup', e);
84     },
85
86     // @private
87     onMouseDown: function(e) {
88         this.fireEvent('mousedown', e);
89     },
90
91     // @private
92     onMouseOver: function(e) {
93         this.fireEvent('mouseover', e);
94     },
95
96     // @private
97     onMouseOut: function(e) {
98         this.fireEvent('mouseout', e);
99     },
100
101     attachEvents: function(o) {
102         var me = this;
103         
104         o.on({
105             scope: me,
106             mousedown: me.onMouseDown,
107             mouseup: me.onMouseUp,
108             mouseover: me.onMouseOver,
109             mouseout: me.onMouseOut,
110             click: me.onClick
111         });
112     },
113
114 <span id='Ext-draw-CompositeSprite-method-add'>    /** Add a Sprite to the Group */
115 </span>    add: function(key, o) {
116         var result = this.callParent(arguments);
117         this.attachEvents(result);
118         return result;
119     },
120
121     insert: function(index, key, o) {
122         return this.callParent(arguments);
123     },
124
125 <span id='Ext-draw-CompositeSprite-method-remove'>    /** Remove a Sprite from the Group */
126 </span>    remove: function(o) {
127         var me = this;
128         
129         o.un({
130             scope: me,
131             mousedown: me.onMouseDown,
132             mouseup: me.onMouseUp,
133             mouseover: me.onMouseOver,
134             mouseout: me.onMouseOut,
135             click: me.onClick
136         });
137         me.callParent(arguments);
138     },
139     
140 <span id='Ext-draw-CompositeSprite-method-getBBox'>    /**
141 </span>     * Returns the group bounding box.
142      * Behaves like {@link Ext.draw.Sprite} getBBox method.
143     */
144     getBBox: function() {
145         var i = 0,
146             sprite,
147             bb,
148             items = this.items,
149             len = this.length,
150             infinity = Infinity,
151             minX = infinity,
152             maxHeight = -infinity,
153             minY = infinity,
154             maxWidth = -infinity,
155             maxWidthBBox, maxHeightBBox;
156         
157         for (; i &lt; len; i++) {
158             sprite = items[i];
159             if (sprite.el) {
160                 bb = sprite.getBBox();
161                 minX = Math.min(minX, bb.x);
162                 minY = Math.min(minY, bb.y);
163                 maxHeight = Math.max(maxHeight, bb.height + bb.y);
164                 maxWidth = Math.max(maxWidth, bb.width + bb.x);
165             }
166         }
167         
168         return {
169             x: minX,
170             y: minY,
171             height: maxHeight - minY,
172             width: maxWidth - minX
173         };
174     },
175
176 <span id='Ext-draw-CompositeSprite-method-setAttributes'>    /**
177 </span>     *  Iterates through all sprites calling
178      *  `setAttributes` on each one. For more information
179      *  {@link Ext.draw.Sprite} provides a description of the
180      *  attributes that can be set with this method.
181      */
182     setAttributes: function(attrs, redraw) {
183         var i = 0,
184             items = this.items,
185             len = this.length;
186             
187         for (; i &lt; len; i++) {
188             items[i].setAttributes(attrs, redraw);
189         }
190         return this;
191     },
192
193 <span id='Ext-draw-CompositeSprite-method-hide'>    /**
194 </span>     * Hides all sprites. If the first parameter of the method is true
195      * then a redraw will be forced for each sprite.
196      */
197     hide: function(redraw) {
198         var i = 0,
199             items = this.items,
200             len = this.length;
201             
202         for (; i &lt; len; i++) {
203             items[i].hide(redraw);
204         }
205         return this;
206     },
207
208 <span id='Ext-draw-CompositeSprite-method-show'>    /**
209 </span>     * Shows all sprites. If the first parameter of the method is true
210      * then a redraw will be forced for each sprite.
211      */
212     show: function(redraw) {
213         var i = 0,
214             items = this.items,
215             len = this.length;
216             
217         for (; i &lt; len; i++) {
218             items[i].show(redraw);
219         }
220         return this;
221     },
222
223     redraw: function() {
224         var me = this,
225             i = 0,
226             items = me.items,
227             surface = me.getSurface(),
228             len = me.length;
229         
230         if (surface) {
231             for (; i &lt; len; i++) {
232                 surface.renderItem(items[i]);
233             }
234         }
235         return me;
236     },
237
238     setStyle: function(obj) {
239         var i = 0,
240             items = this.items,
241             len = this.length,
242             item, el;
243             
244         for (; i &lt; len; i++) {
245             item = items[i];
246             el = item.el;
247             if (el) {
248                 el.setStyle(obj);
249             }
250         }
251     },
252
253     addCls: function(obj) {
254         var i = 0,
255             items = this.items,
256             surface = this.getSurface(),
257             len = this.length;
258         
259         if (surface) {
260             for (; i &lt; len; i++) {
261                 surface.addCls(items[i], obj);
262             }
263         }
264     },
265
266     removeCls: function(obj) {
267         var i = 0,
268             items = this.items,
269             surface = this.getSurface(),
270             len = this.length;
271         
272         if (surface) {
273             for (; i &lt; len; i++) {
274                 surface.removeCls(items[i], obj);
275             }
276         }
277     },
278     
279 <span id='Ext-draw-CompositeSprite-method-getSurface'>    /**
280 </span>     * Grab the surface from the items
281      * @private
282      * @return {Ext.draw.Surface} The surface, null if not found
283      */
284     getSurface: function(){
285         var first = this.first();
286         if (first) {
287             return first.surface;
288         }
289         return null;
290     },
291     
292 <span id='Ext-draw-CompositeSprite-method-destroy'>    /**
293 </span>     * Destroys the SpriteGroup
294      */
295     destroy: function(){
296         var me = this,
297             surface = me.getSurface(),
298             item;
299             
300         if (surface) {
301             while (me.getCount() &gt; 0) {
302                 item = me.first();
303                 me.remove(item);
304                 surface.remove(item);
305             }
306         }
307         me.clearListeners();
308     }
309 });
310 </pre>
311 </body>
312 </html>