Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / 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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../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) {
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>