docs/source/CompositeSprite.html

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