3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * @class Ext.draw.CompositeSprite
17 * @extends Ext.util.MixedCollection
19 * A composite Sprite handles a group of sprites with common methods to a sprite
20 * such as `hide`, `show`, `setAttributes`. These methods are applied to the set of sprites
23 * CompositeSprite extends {@link Ext.util.MixedCollection} so you can use the same methods
24 * in `MixedCollection` to iterate through sprites, add and remove elements, etc.
26 * In order to create a CompositeSprite, one has to provide a handle to the surface where it is
29 * var group = Ext.create('Ext.draw.CompositeSprite', {
30 * surface: drawComponent.surface
33 * Then just by using `MixedCollection` methods it's possible to add {@link Ext.draw.Sprite}s:
39 * And then apply common Sprite methods to them:
41 * group.setAttributes({
45 Ext.define('Ext.draw.CompositeSprite', {
47 /* Begin Definitions */
49 extend: 'Ext.util.MixedCollection',
51 animate: 'Ext.util.Animate'
55 isCompositeSprite: true,
56 constructor: function(config) {
59 config = config || {};
60 Ext.apply(me, config);
69 me.id = Ext.id(null, 'ext-sprite-group-');
74 onClick: function(e) {
75 this.fireEvent('click', e);
79 onMouseUp: function(e) {
80 this.fireEvent('mouseup', e);
84 onMouseDown: function(e) {
85 this.fireEvent('mousedown', e);
89 onMouseOver: function(e) {
90 this.fireEvent('mouseover', e);
94 onMouseOut: function(e) {
95 this.fireEvent('mouseout', e);
98 attachEvents: function(o) {
103 mousedown: me.onMouseDown,
104 mouseup: me.onMouseUp,
105 mouseover: me.onMouseOver,
106 mouseout: me.onMouseOut,
111 // Inherit docs from MixedCollection
112 add: function(key, o) {
113 var result = this.callParent(arguments);
114 this.attachEvents(result);
118 insert: function(index, key, o) {
119 return this.callParent(arguments);
122 // Inherit docs from MixedCollection
123 remove: function(o) {
128 mousedown: me.onMouseDown,
129 mouseup: me.onMouseUp,
130 mouseover: me.onMouseOver,
131 mouseout: me.onMouseOut,
134 return me.callParent(arguments);
138 * Returns the group bounding box.
139 * Behaves like {@link Ext.draw.Sprite#getBBox} method.
140 * @return {Object} an object with x, y, width, and height properties.
142 getBBox: function() {
150 maxHeight = -infinity,
152 maxWidth = -infinity,
153 maxWidthBBox, maxHeightBBox;
155 for (; i < len; i++) {
158 bb = sprite.getBBox();
159 minX = Math.min(minX, bb.x);
160 minY = Math.min(minY, bb.y);
161 maxHeight = Math.max(maxHeight, bb.height + bb.y);
162 maxWidth = Math.max(maxWidth, bb.width + bb.x);
169 height: maxHeight - minY,
170 width: maxWidth - minX
175 * Iterates through all sprites calling `setAttributes` on each one. For more information {@link Ext.draw.Sprite}
176 * provides a description of the attributes that can be set with this method.
177 * @param {Object} attrs Attributes to be changed on the sprite.
178 * @param {Boolean} redraw Flag to immediatly draw the change.
179 * @return {Ext.draw.CompositeSprite} this
181 setAttributes: function(attrs, redraw) {
186 for (; i < len; i++) {
187 items[i].setAttributes(attrs, redraw);
193 * Hides all sprites. If the first parameter of the method is true
194 * then a redraw will be forced for each sprite.
195 * @param {Boolean} redraw Flag to immediatly draw the change.
196 * @return {Ext.draw.CompositeSprite} this
198 hide: function(redraw) {
203 for (; i < len; i++) {
204 items[i].hide(redraw);
210 * Shows all sprites. If the first parameter of the method is true
211 * then a redraw will be forced for each sprite.
212 * @param {Boolean} redraw Flag to immediatly draw the change.
213 * @return {Ext.draw.CompositeSprite} this
215 show: function(redraw) {
220 for (; i < len; i++) {
221 items[i].show(redraw);
230 surface = me.getSurface(),
234 for (; i < len; i++) {
235 surface.renderItem(items[i]);
241 setStyle: function(obj) {
247 for (; i < len; i++) {
256 addCls: function(obj) {
259 surface = this.getSurface(),
263 for (; i < len; i++) {
264 surface.addCls(items[i], obj);
269 removeCls: function(obj) {
272 surface = this.getSurface(),
276 for (; i < len; i++) {
277 surface.removeCls(items[i], obj);
283 * Grab the surface from the items
285 * @return {Ext.draw.Surface} The surface, null if not found
287 getSurface: function(){
288 var first = this.first();
290 return first.surface;
296 * Destroys the SpriteGroup
300 surface = me.getSurface(),
304 while (me.getCount() > 0) {
307 surface.remove(item);