<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>The source code</title> <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 type="text/javascript"> function highlight() { document.getElementById(location.hash.replace(/#/, "")).className = "highlight"; } </script> </head> <body onload="prettyPrint(); highlight();"> <pre class="prettyprint lang-js"><span id='Ext-fx-target-Component'>/** </span> * @class Ext.fx.target.Component * * This class represents a animation target for a {@link Ext.Component}. In general this class will not be * created directly, the {@link Ext.Component} will be passed to the animation and * and the appropriate target will be created. */ Ext.define('Ext.fx.target.Component', { /* Begin Definitions */ extend: 'Ext.fx.target.Target', /* End Definitions */ type: 'component', // Methods to call to retrieve unspecified "from" values from a target Component getPropMethod: { top: function() { return this.getPosition(true)[1]; }, left: function() { return this.getPosition(true)[0]; }, x: function() { return this.getPosition()[0]; }, y: function() { return this.getPosition()[1]; }, height: function() { return this.getHeight(); }, width: function() { return this.getWidth(); }, opacity: function() { return this.el.getStyle('opacity'); } }, compMethod: { top: 'setPosition', left: 'setPosition', x: 'setPagePosition', y: 'setPagePosition', height: 'setSize', width: 'setSize', opacity: 'setOpacity' }, // Read the named attribute from the target Component. Use the defined getter for the attribute getAttr: function(attr, val) { return [[this.target, val !== undefined ? val : this.getPropMethod[attr].call(this.target)]]; }, setAttr: function(targetData, isFirstFrame, isLastFrame) { var me = this, target = me.target, ln = targetData.length, attrs, attr, o, i, j, meth, targets, left, top, w, h; for (i = 0; i < ln; i++) { attrs = targetData[i].attrs; for (attr in attrs) { targets = attrs[attr].length; meth = { setPosition: {}, setPagePosition: {}, setSize: {}, setOpacity: {} }; for (j = 0; j < targets; j++) { o = attrs[attr][j]; // We REALLY want a single function call, so push these down to merge them: eg // meth.setPagePosition.target = <targetComponent> // meth.setPagePosition['x'] = 100 // meth.setPagePosition['y'] = 100 meth[me.compMethod[attr]].target = o[0]; meth[me.compMethod[attr]][attr] = o[1]; } if (meth.setPosition.target) { o = meth.setPosition; left = (o.left === undefined) ? undefined : parseFloat(o.left); top = (o.top === undefined) ? undefined : parseFloat(o.top); o.target.setPosition(left, top); } if (meth.setPagePosition.target) { o = meth.setPagePosition; o.target.setPagePosition(o.x, o.y); } if (meth.setSize.target) { o = meth.setSize; // Dimensions not being animated MUST NOT be autosized. They must remain at current value. w = (o.width === undefined) ? o.target.getWidth() : parseFloat(o.width); h = (o.height === undefined) ? o.target.getHeight() : parseFloat(o.height); // Only set the size of the Component on the last frame, or if the animation was // configured with dynamic: true. // In other cases, we just set the target element size. // This will result in either clipping if animating a reduction in size, or the revealing of // the inner elements of the Component if animating an increase in size. // Component's animate function initially resizes to the larger size before resizing the // outer element to clip the contents. if (isLastFrame || me.dynamic) { o.target.setSize(w, h); } else { o.target.el.setSize(w, h); } } if (meth.setOpacity.target) { o = meth.setOpacity; o.target.el.setStyle('opacity', o.opacity); } } } } }); </pre> </body> </html>