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