docs/source/Component4.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-fx.target.Component'>/**
   2 </span> * @class Ext.fx.target.Component
   3  * @extends Ext.fx.target.Target
   4  *
   5  * This class represents a animation target for a {@link Ext.Component}. In general this class will not be
   6  * created directly, the {@link Ext.Component} will be passed to the animation and
   7  * and the appropriate target will be created.
   8  */
   9 Ext.define('Ext.fx.target.Component', {
  10
  11     /* Begin Definitions */
  12
  13     extend: 'Ext.fx.target.Target',
  14
  15     /* End Definitions */
  16
  17     type: 'component',
  18
  19     // Methods to call to retrieve unspecified &quot;from&quot; values from a target Component
  20     getPropMethod: {
  21         top: function() {
  22             return this.getPosition(true)[1];
  23         },
  24         left: function() {
  25             return this.getPosition(true)[0];
  26         },
  27         x: function() {
  28             return this.getPosition()[0];
  29         },
  30         y: function() {
  31             return this.getPosition()[1];
  32         },
  33         height: function() {
  34             return this.getHeight();
  35         },
  36         width: function() {
  37             return this.getWidth();
  38         },
  39         opacity: function() {
  40             return this.el.getStyle('opacity');
  41         }
  42     },
  43
  44     compMethod: {
  45         top: 'setPosition',
  46         left: 'setPosition',
  47         x: 'setPagePosition',
  48         y: 'setPagePosition',
  49         height: 'setSize',
  50         width: 'setSize',
  51         opacity: 'setOpacity'
  52     },
  53
  54     // Read the named attribute from the target Component. Use the defined getter for the attribute
  55     getAttr: function(attr, val) {
  56         return [[this.target, val !== undefined ? val : this.getPropMethod[attr].call(this.target)]];
  57     },
  58
  59     setAttr: function(targetData, isFirstFrame, isLastFrame) {
  60         var me = this,
  61             target = me.target,
  62             ln = targetData.length,
  63             attrs, attr, o, i, j, meth, targets, left, top, w, h;
  64         for (i = 0; i &lt; ln; i++) {
  65             attrs = targetData[i].attrs;
  66             for (attr in attrs) {
  67                 targets = attrs[attr].length;
  68                 meth = {
  69                     setPosition: {},
  70                     setPagePosition: {},
  71                     setSize: {},
  72                     setOpacity: {}
  73                 };
  74                 for (j = 0; j &lt; targets; j++) {
  75                     o = attrs[attr][j];
  76                     // We REALLY want a single function call, so push these down to merge them: eg
  77                     // meth.setPagePosition.target = &lt;targetComponent&gt;
  78                     // meth.setPagePosition['x'] = 100
  79                     // meth.setPagePosition['y'] = 100
  80                     meth[me.compMethod[attr]].target = o[0];
  81                     meth[me.compMethod[attr]][attr] = o[1];
  82                 }
  83                 if (meth.setPosition.target) {
  84                     o = meth.setPosition;
  85                     left = (o.left === undefined) ? undefined : parseInt(o.left, 10);
  86                     top = (o.top === undefined) ? undefined : parseInt(o.top, 10);
  87                     o.target.setPosition(left, top);
  88                 }
  89                 if (meth.setPagePosition.target) {
  90                     o = meth.setPagePosition;
  91                     o.target.setPagePosition(o.x, o.y);
  92                 }
  93                 if (meth.setSize.target) {
  94                     o = meth.setSize;
  95                     // Dimensions not being animated MUST NOT be autosized. They must remain at current value.
  96                     w = (o.width === undefined) ? o.target.getWidth() : parseInt(o.width, 10);
  97                     h = (o.height === undefined) ? o.target.getHeight() : parseInt(o.height, 10);
  98
  99                     // Only set the size of the Component on the last frame, or if the animation was
 100                     // configured with dynamic: true.
 101                     // In other cases, we just set the target element size.
 102                     // This will result in either clipping if animating a reduction in size, or the revealing of
 103                     // the inner elements of the Component if animating an increase in size.
 104                     // Component's animate function initially resizes to the larger size before resizing the
 105                     // outer element to clip the contents.
 106                     if (isLastFrame || me.dynamic) {
 107                         o.target.componentLayout.childrenChanged = true;
 108
 109                         // Flag if we are being called by an animating layout: use setCalculatedSize
 110                         if (me.layoutAnimation) {
 111                             o.target.setCalculatedSize(w, h);
 112                         } else {
 113                             o.target.setSize(w, h);
 114                         }
 115                     }
 116                     else {
 117                         o.target.el.setSize(w, h);
 118                     }
 119                 }
 120                 if (meth.setOpacity.target) {
 121                     o = meth.setOpacity;
 122                     o.target.el.setStyle('opacity', o.opacity);
 123                 }
 124             }
 125         }
 126     }
 127 });
 128 </pre></pre></body></html>