Component.html 5.2 KB

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