Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / CompositeSprite2.html
index b1bf843..0cbf12e 100644 (file)
@@ -3,8 +3,8 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
-  <script type="text/javascript" src="../prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   <style type="text/css">
     .highlight { display: block; background-color: #ddd; }
   </style>
   </script>
 </head>
 <body onload="prettyPrint(); highlight();">
-  <pre class="prettyprint lang-js"><span id='Ext-draw-CompositeSprite'>/**
-</span> * @class Ext.draw.CompositeSprite
- * @extends Ext.util.MixedCollection
- *
- * A composite Sprite handles a group of sprites with common methods to a sprite
- * such as `hide`, `show`, `setAttributes`. These methods are applied to the set of sprites
- * added to the group.
- *
- * CompositeSprite extends {@link Ext.util.MixedCollection} so you can use the same methods
- * in `MixedCollection` to iterate through sprites, add and remove elements, etc.
- *
- * In order to create a CompositeSprite, one has to provide a handle to the surface where it is
- * rendered:
- *
- *     var group = Ext.create('Ext.draw.CompositeSprite', {
- *         surface: drawComponent.surface
- *     });
- *                  
- * Then just by using `MixedCollection` methods it's possible to add {@link Ext.draw.Sprite}s:
- *  
- *     group.add(sprite1);
- *     group.add(sprite2);
- *     group.add(sprite3);
- *                  
- * And then apply common Sprite methods to them:
- *  
- *     group.setAttributes({
- *         fill: '#f00'
- *     }, true);
- */
-Ext.define('Ext.draw.CompositeSprite', {
-
-    /* Begin Definitions */
-
-    extend: 'Ext.util.MixedCollection',
-    mixins: {
-        animate: 'Ext.util.Animate'
-    },
-
-    /* End Definitions */
-    isCompositeSprite: true,
-    constructor: function(config) {
-        var me = this;
-        
-        config = config || {};
-        Ext.apply(me, config);
-
-        me.addEvents(
-            'mousedown',
-            'mouseup',
-            'mouseover',
-            'mouseout',
-            'click'
-        );
-        me.id = Ext.id(null, 'ext-sprite-group-');
-        me.callParent();
-    },
-
-    // @private
-    onClick: function(e) {
-        this.fireEvent('click', e);
-    },
-
-    // @private
-    onMouseUp: function(e) {
-        this.fireEvent('mouseup', e);
-    },
-
-    // @private
-    onMouseDown: function(e) {
-        this.fireEvent('mousedown', e);
-    },
+  <pre class="prettyprint lang-js"><span id='Ext-fx-target-CompositeSprite'>/**
+</span> * @class Ext.fx.target.CompositeSprite
+ * @extends Ext.fx.target.Sprite
 
-    // @private
-    onMouseOver: function(e) {
-        this.fireEvent('mouseover', e);
-    },
+This class represents a animation target for a {@link Ext.draw.CompositeSprite}. It allows
+each {@link Ext.draw.Sprite} in the group to be animated as a whole. In general this class will not be
+created directly, the {@link Ext.draw.CompositeSprite} will be passed to the animation and
+and the appropriate target will be created.
 
-    // @private
-    onMouseOut: function(e) {
-        this.fireEvent('mouseout', e);
-    },
-
-    attachEvents: function(o) {
-        var me = this;
-        
-        o.on({
-            scope: me,
-            mousedown: me.onMouseDown,
-            mouseup: me.onMouseUp,
-            mouseover: me.onMouseOver,
-            mouseout: me.onMouseOut,
-            click: me.onClick
-        });
-    },
-
-<span id='Ext-draw-CompositeSprite-method-add'>    /** Add a Sprite to the Group */
-</span>    add: function(key, o) {
-        var result = this.callParent(arguments);
-        this.attachEvents(result);
-        return result;
-    },
-
-    insert: function(index, key, o) {
-        return this.callParent(arguments);
-    },
-
-<span id='Ext-draw-CompositeSprite-method-remove'>    /** Remove a Sprite from the Group */
-</span>    remove: function(o) {
-        var me = this;
-        
-        o.un({
-            scope: me,
-            mousedown: me.onMouseDown,
-            mouseup: me.onMouseUp,
-            mouseover: me.onMouseOver,
-            mouseout: me.onMouseOut,
-            click: me.onClick
-        });
-        me.callParent(arguments);
-    },
-    
-<span id='Ext-draw-CompositeSprite-method-getBBox'>    /**
-</span>     * Returns the group bounding box.
-     * Behaves like {@link Ext.draw.Sprite} getBBox method.
-    */
-    getBBox: function() {
-        var i = 0,
-            sprite,
-            bb,
-            items = this.items,
-            len = this.length,
-            infinity = Infinity,
-            minX = infinity,
-            maxHeight = -infinity,
-            minY = infinity,
-            maxWidth = -infinity,
-            maxWidthBBox, maxHeightBBox;
-        
-        for (; i &lt; len; i++) {
-            sprite = items[i];
-            if (sprite.el) {
-                bb = sprite.getBBox();
-                minX = Math.min(minX, bb.x);
-                minY = Math.min(minY, bb.y);
-                maxHeight = Math.max(maxHeight, bb.height + bb.y);
-                maxWidth = Math.max(maxWidth, bb.width + bb.x);
-            }
-        }
-        
-        return {
-            x: minX,
-            y: minY,
-            height: maxHeight - minY,
-            width: maxWidth - minX
-        };
-    },
-
-<span id='Ext-draw-CompositeSprite-method-setAttributes'>    /**
-</span>     *  Iterates through all sprites calling
-     *  `setAttributes` on each one. For more information
-     *  {@link Ext.draw.Sprite} provides a description of the
-     *  attributes that can be set with this method.
-     */
-    setAttributes: function(attrs, redraw) {
-        var i = 0,
-            items = this.items,
-            len = this.length;
-            
-        for (; i &lt; len; i++) {
-            items[i].setAttributes(attrs, redraw);
-        }
-        return this;
-    },
-
-<span id='Ext-draw-CompositeSprite-method-hide'>    /**
-</span>     * Hides all sprites. If the first parameter of the method is true
-     * then a redraw will be forced for each sprite.
-     */
-    hide: function(redraw) {
-        var i = 0,
-            items = this.items,
-            len = this.length;
-            
-        for (; i &lt; len; i++) {
-            items[i].hide(redraw);
-        }
-        return this;
-    },
+ * @markdown
+ */
 
-<span id='Ext-draw-CompositeSprite-method-show'>    /**
-</span>     * Shows all sprites. If the first parameter of the method is true
-     * then a redraw will be forced for each sprite.
-     */
-    show: function(redraw) {
-        var i = 0,
-            items = this.items,
-            len = this.length;
-            
-        for (; i &lt; len; i++) {
-            items[i].show(redraw);
-        }
-        return this;
-    },
+Ext.define('Ext.fx.target.CompositeSprite', {
 
-    redraw: function() {
-        var me = this,
-            i = 0,
-            items = me.items,
-            surface = me.getSurface(),
-            len = me.length;
-        
-        if (surface) {
-            for (; i &lt; len; i++) {
-                surface.renderItem(items[i]);
-            }
-        }
-        return me;
-    },
+    /* Begin Definitions */
 
-    setStyle: function(obj) {
-        var i = 0,
-            items = this.items,
-            len = this.length,
-            item, el;
-            
-        for (; i &lt; len; i++) {
-            item = items[i];
-            el = item.el;
-            if (el) {
-                el.setStyle(obj);
-            }
-        }
-    },
+    extend: 'Ext.fx.target.Sprite',
 
-    addCls: function(obj) {
-        var i = 0,
-            items = this.items,
-            surface = this.getSurface(),
-            len = this.length;
-        
-        if (surface) {
-            for (; i &lt; len; i++) {
-                surface.addCls(items[i], obj);
-            }
-        }
-    },
+    /* End Definitions */
 
-    removeCls: function(obj) {
-        var i = 0,
-            items = this.items,
-            surface = this.getSurface(),
-            len = this.length;
-        
-        if (surface) {
-            for (; i &lt; len; i++) {
-                surface.removeCls(items[i], obj);
-            }
-        }
-    },
-    
-<span id='Ext-draw-CompositeSprite-method-getSurface'>    /**
-</span>     * Grab the surface from the items
-     * @private
-     * @return {Ext.draw.Surface} The surface, null if not found
-     */
-    getSurface: function(){
-        var first = this.first();
-        if (first) {
-            return first.surface;
-        }
-        return null;
-    },
-    
-<span id='Ext-draw-CompositeSprite-method-destroy'>    /**
-</span>     * Destroys the SpriteGroup
-     */
-    destroy: function(){
-        var me = this,
-            surface = me.getSurface(),
-            item;
-            
-        if (surface) {
-            while (me.getCount() &gt; 0) {
-                item = me.first();
-                me.remove(item);
-                surface.remove(item);
-            }
-        }
-        me.clearListeners();
+    getAttr: function(attr, val) {
+        var out = [],
+            target = this.target;
+        target.each(function(sprite) {
+            out.push([sprite, val != undefined ? val : this.getFromPrim(sprite, attr)]);
+        }, this);
+        return out;
     }
 });
 </pre>