Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / CompositeSprite.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-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     // Inherit docs from MixedCollection
115     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     // Inherit docs from MixedCollection
126     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         return 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      * @return {Object} an object with x, y, width, and height properties.
144      */
145     getBBox: function() {
146         var i = 0,
147             sprite,
148             bb,
149             items = this.items,
150             len = this.length,
151             infinity = Infinity,
152             minX = infinity,
153             maxHeight = -infinity,
154             minY = infinity,
155             maxWidth = -infinity,
156             maxWidthBBox, maxHeightBBox;
157         
158         for (; i &lt; len; i++) {
159             sprite = items[i];
160             if (sprite.el) {
161                 bb = sprite.getBBox();
162                 minX = Math.min(minX, bb.x);
163                 minY = Math.min(minY, bb.y);
164                 maxHeight = Math.max(maxHeight, bb.height + bb.y);
165                 maxWidth = Math.max(maxWidth, bb.width + bb.x);
166             }
167         }
168         
169         return {
170             x: minX,
171             y: minY,
172             height: maxHeight - minY,
173             width: maxWidth - minX
174         };
175     },
176
177 <span id='Ext-draw-CompositeSprite-method-setAttributes'>    /**
178 </span>     * Iterates through all sprites calling `setAttributes` on each one. For more information {@link Ext.draw.Sprite}
179      * provides a description of the attributes that can be set with this method.
180      * @param {Object} attrs Attributes to be changed on the sprite.
181      * @param {Boolean} redraw Flag to immediatly draw the change.
182      * @return {Ext.draw.CompositeSprite} this
183      */
184     setAttributes: function(attrs, redraw) {
185         var i = 0,
186             items = this.items,
187             len = this.length;
188             
189         for (; i &lt; len; i++) {
190             items[i].setAttributes(attrs, redraw);
191         }
192         return this;
193     },
194
195 <span id='Ext-draw-CompositeSprite-method-hide'>    /**
196 </span>     * Hides all sprites. If the first parameter of the method is true
197      * then a redraw will be forced for each sprite.
198      * @param {Boolean} redraw Flag to immediatly draw the change.
199      * @return {Ext.draw.CompositeSprite} this
200      */
201     hide: function(redraw) {
202         var i = 0,
203             items = this.items,
204             len = this.length;
205             
206         for (; i &lt; len; i++) {
207             items[i].hide(redraw);
208         }
209         return this;
210     },
211
212 <span id='Ext-draw-CompositeSprite-method-show'>    /**
213 </span>     * Shows all sprites. If the first parameter of the method is true
214      * then a redraw will be forced for each sprite.
215      * @param {Boolean} redraw Flag to immediatly draw the change.
216      * @return {Ext.draw.CompositeSprite} this
217      */
218     show: function(redraw) {
219         var i = 0,
220             items = this.items,
221             len = this.length;
222             
223         for (; i &lt; len; i++) {
224             items[i].show(redraw);
225         }
226         return this;
227     },
228
229     redraw: function() {
230         var me = this,
231             i = 0,
232             items = me.items,
233             surface = me.getSurface(),
234             len = me.length;
235         
236         if (surface) {
237             for (; i &lt; len; i++) {
238                 surface.renderItem(items[i]);
239             }
240         }
241         return me;
242     },
243
244     setStyle: function(obj) {
245         var i = 0,
246             items = this.items,
247             len = this.length,
248             item, el;
249             
250         for (; i &lt; len; i++) {
251             item = items[i];
252             el = item.el;
253             if (el) {
254                 el.setStyle(obj);
255             }
256         }
257     },
258
259     addCls: function(obj) {
260         var i = 0,
261             items = this.items,
262             surface = this.getSurface(),
263             len = this.length;
264         
265         if (surface) {
266             for (; i &lt; len; i++) {
267                 surface.addCls(items[i], obj);
268             }
269         }
270     },
271
272     removeCls: function(obj) {
273         var i = 0,
274             items = this.items,
275             surface = this.getSurface(),
276             len = this.length;
277         
278         if (surface) {
279             for (; i &lt; len; i++) {
280                 surface.removeCls(items[i], obj);
281             }
282         }
283     },
284     
285 <span id='Ext-draw-CompositeSprite-method-getSurface'>    /**
286 </span>     * Grab the surface from the items
287      * @private
288      * @return {Ext.draw.Surface} The surface, null if not found
289      */
290     getSurface: function(){
291         var first = this.first();
292         if (first) {
293             return first.surface;
294         }
295         return null;
296     },
297     
298 <span id='Ext-draw-CompositeSprite-method-destroy'>    /**
299 </span>     * Destroys the SpriteGroup
300      */
301     destroy: function(){
302         var me = this,
303             surface = me.getSurface(),
304             item;
305             
306         if (surface) {
307             while (me.getCount() &gt; 0) {
308                 item = me.first();
309                 me.remove(item);
310                 surface.remove(item);
311             }
312         }
313         me.clearListeners();
314     }
315 });
316 </pre>
317 </body>
318 </html>