Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / docs / source / Element.fx.html
index 253f7d9..5d1fdcb 100644 (file)
@@ -1,43 +1,68 @@
+<!DOCTYPE html>
 <html>
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <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>
+  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../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();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.2.2
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-core-Element'>/**
+</span> * @class Ext.core.Element
  */
-/**
- * @class Ext.Element
+<span id='Ext-core-Element-property-VISIBILITY'>/**
+</span> * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element
+ * @static
+ * @type Number
  */
-<div id="prop-Ext.Element-VISIBILITY"></div>/**
- * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element
+Ext.core.Element.VISIBILITY = 1;
+<span id='Ext-core-Element-property-DISPLAY'>/**
+</span> * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element
  * @static
  * @type Number
  */
-Ext.Element.VISIBILITY = 1;
-<div id="prop-Ext.Element-DISPLAY"></div>/**
- * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element
+Ext.core.Element.DISPLAY = 2;
+
+<span id='Ext-core-Element-property-OFFSETS'>/**
+</span> * Visibility mode constant for use with {@link #setVisibilityMode}. Use offsets (x and y positioning offscreen)
+ * to hide element.
  * @static
  * @type Number
  */
-Ext.Element.DISPLAY = 2;
+Ext.core.Element.OFFSETS = 3;
+
+
+Ext.core.Element.ASCLASS = 4;
+
+<span id='Ext-core-Element-property-visibilityCls'>/**
+</span> * Defaults to 'x-hide-nosize'
+ * @static
+ * @type String
+ */
+Ext.core.Element.visibilityCls = Ext.baseCSSPrefix + 'hide-nosize';
 
-Ext.Element.addMethods(function(){
-    var VISIBILITY = "visibility",
-        DISPLAY = "display",
-        HIDDEN = "hidden",
-        OFFSETS = "offsets",
-        NONE = "none",
+Ext.core.Element.addMethods(function(){
+    var El = Ext.core.Element,
+        OPACITY = &quot;opacity&quot;,
+        VISIBILITY = &quot;visibility&quot;,
+        DISPLAY = &quot;display&quot;,
+        HIDDEN = &quot;hidden&quot;,
+        OFFSETS = &quot;offsets&quot;,
+        ASCLASS = &quot;asclass&quot;,
+        NONE = &quot;none&quot;,
+        NOSIZE = 'nosize',
         ORIGINALDISPLAY = 'originalDisplay',
         VISMODE = 'visibilityMode',
-        ELDISPLAY = Ext.Element.DISPLAY,
-        data = Ext.Element.data,
+        ISVISIBLE = 'isVisible',
+        data = El.data,
         getDisplay = function(dom){
             var d = data(dom, ORIGINALDISPLAY);
             if(d === undefined){
@@ -54,266 +79,168 @@ Ext.Element.addMethods(function(){
         };
 
     return {
-        <div id="prop-Ext.Element-originalDisplay"></div>/**
-         * The element's default display mode  (defaults to "")
+<span id='Ext-core-Element-property-originalDisplay'>        /**
+</span>         * The element's default display mode  (defaults to &quot;&quot;)
          * @type String
          */
-        originalDisplay : "",
+        originalDisplay : &quot;&quot;,
         visibilityMode : 1,
 
-        <div id="method-Ext.Element-setVisibilityMode"></div>/**
-         * Sets the element's visibility mode. When setVisible() is called it
+<span id='Ext-core-Element-method-setVisibilityMode'>        /**
+</span>         * Sets the element's visibility mode. When setVisible() is called it
          * will use this to determine whether to set the visibility or the display property.
-         * @param {Number} visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY
-         * @return {Ext.Element} this
+         * @param {Number} visMode Ext.core.Element.VISIBILITY or Ext.core.Element.DISPLAY
+         * @return {Ext.core.Element} this
          */
         setVisibilityMode : function(visMode){
             data(this.dom, VISMODE, visMode);
             return this;
         },
 
-        <div id="method-Ext.Element-animate"></div>/**
-         * Perform custom animation on this element.
-         * <div><ul class="mdetail-params">
-         * <li><u>Animation Properties</u></li>
-         *
-         * <p>The Animation Control Object enables gradual transitions for any member of an
-         * element's style object that takes a numeric value including but not limited to
-         * these properties:</p><div><ul class="mdetail-params">
-         * <li><tt>bottom, top, left, right</tt></li>
-         * <li><tt>height, width</tt></li>
-         * <li><tt>margin, padding</tt></li>
-         * <li><tt>borderWidth</tt></li>
-         * <li><tt>opacity</tt></li>
-         * <li><tt>fontSize</tt></li>
-         * <li><tt>lineHeight</tt></li>
-         * </ul></div>
-         *
-         *
-         * <li><u>Animation Property Attributes</u></li>
-         *
-         * <p>Each Animation Property is a config object with optional properties:</p>
-         * <div><ul class="mdetail-params">
-         * <li><tt>by</tt>*  : relative change - start at current value, change by this value</li>
-         * <li><tt>from</tt> : ignore current value, start from this value</li>
-         * <li><tt>to</tt>*  : start at current value, go to this value</li>
-         * <li><tt>unit</tt> : any allowable unit specification</li>
-         * <p>* do not specify both <tt>to</tt> and <tt>by</tt> for an animation property</p>
-         * </ul></div>
-         *
-         * <li><u>Animation Types</u></li>
-         *
-         * <p>The supported animation types:</p><div><ul class="mdetail-params">
-         * <li><tt>'run'</tt> : Default
-         * <pre><code>
-var el = Ext.get('complexEl');
-el.animate(
-    // animation control object
-    {
-        borderWidth: {to: 3, from: 0},
-        opacity: {to: .3, from: 1},
-        height: {to: 50, from: el.getHeight()},
-        width: {to: 300, from: el.getWidth()},
-        top  : {by: - 100, unit: 'px'},
-    },
-    0.35,      // animation duration
-    null,      // callback
-    'easeOut', // easing method
-    'run'      // animation type ('run','color','motion','scroll')
-);
-         * </code></pre>
-         * </li>
-         * <li><tt>'color'</tt>
-         * <p>Animates transition of background, text, or border colors.</p>
-         * <pre><code>
-el.animate(
-    // animation control object
-    {
-        color: { to: '#06e' },
-        backgroundColor: { to: '#e06' }
-    },
-    0.35,      // animation duration
-    null,      // callback
-    'easeOut', // easing method
-    'color'    // animation type ('run','color','motion','scroll')
-);
-         * </code></pre>
-         * </li>
-         *
-         * <li><tt>'motion'</tt>
-         * <p>Animates the motion of an element to/from specific points using optional bezier
-         * way points during transit.</p>
-         * <pre><code>
-el.animate(
-    // animation control object
-    {
-        borderWidth: {to: 3, from: 0},
-        opacity: {to: .3, from: 1},
-        height: {to: 50, from: el.getHeight()},
-        width: {to: 300, from: el.getWidth()},
-        top  : {by: - 100, unit: 'px'},
-        points: {
-            to: [50, 100],  // go to this point
-            control: [      // optional bezier way points
-                [ 600, 800],
-                [-100, 200]
-            ]
-        }
-    },
-    3000,      // animation duration (milliseconds!)
-    null,      // callback
-    'easeOut', // easing method
-    'motion'   // animation type ('run','color','motion','scroll')
-);
-         * </code></pre>
-         * </li>
-         * <li><tt>'scroll'</tt>
-         * <p>Animate horizontal or vertical scrolling of an overflowing page element.</p>
-         * <pre><code>
-el.animate(
-    // animation control object
-    {
-        scroll: {to: [400, 300]}
-    },
-    0.35,      // animation duration
-    null,      // callback
-    'easeOut', // easing method
-    'scroll'   // animation type ('run','color','motion','scroll')
-);
-         * </code></pre>
-         * </li>
-         * </ul></div>
-         *
-         * </ul></div>
-         *
-         * @param {Object} args The animation control args
-         * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to <tt>.35</tt>)
-         * @param {Function} onComplete (optional) Function to call when animation completes
-         * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to <tt>'easeOut'</tt>)
-         * @param {String} animType (optional) <tt>'run'</tt> is the default. Can also be <tt>'color'</tt>,
-         * <tt>'motion'</tt>, or <tt>'scroll'</tt>
-         * @return {Ext.Element} this
-         */
-        animate : function(args, duration, onComplete, easing, animType){
-            this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
-            return this;
-        },
-
-        /*
-         * @private Internal animation call
+<span id='Ext-core-Element-method-isVisible'>        /**
+</span>         * Checks whether the element is currently visible using both visibility and display properties.
+         * @return {Boolean} True if the element is currently visible, else false
          */
-        anim : function(args, opt, animType, defaultDur, defaultEase, cb){
-            animType = animType || 'run';
-            opt = opt || {};
+        isVisible : function() {
             var me = this,
-                anim = Ext.lib.Anim[animType](
-                    me.dom,
-                    args,
-                    (opt.duration || defaultDur) || .35,
-                    (opt.easing || defaultEase) || 'easeOut',
-                    function(){
-                        if(cb) cb.call(me);
-                        if(opt.callback) opt.callback.call(opt.scope || me, me, opt);
-                    },
-                    me
-                );
-            opt.anim = anim;
-            return anim;
-        },
+                dom = me.dom,
+                visible = data(dom, ISVISIBLE);
 
-        // private legacy anim prep
-        preanim : function(a, i){
-            return !a[i] ? false : (typeof a[i] == 'object' ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
-        },
+            if(typeof visible == 'boolean'){ //return the cached value if registered
+                return visible;
+            }
+            //Determine the current state based on display states
+            visible = !me.isStyle(VISIBILITY, HIDDEN) &amp;&amp;
+                      !me.isStyle(DISPLAY, NONE) &amp;&amp;
+                      !((getVisMode(dom) == El.ASCLASS) &amp;&amp; me.hasCls(me.visibilityCls || El.visibilityCls));
 
-        <div id="method-Ext.Element-isVisible"></div>/**
-         * Checks whether the element is currently visible using both visibility and display properties.
-         * @return {Boolean} True if the element is currently visible, else false
-         */
-        isVisible : function() {
-            return !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE);
+            data(dom, ISVISIBLE, visible);
+            return visible;
         },
 
-        <div id="method-Ext.Element-setVisible"></div>/**
-         * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
+<span id='Ext-core-Element-method-setVisible'>        /**
+</span>         * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
          * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
          * @param {Boolean} visible Whether the element is visible
          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
-         * @return {Ext.Element} this
+         * @return {Ext.core.Element} this
          */
-         setVisible : function(visible, animate){
-            var me = this, isDisplay, isVisible, isOffsets,
-                dom = me.dom;
+        setVisible : function(visible, animate){
+            var me = this, isDisplay, isVisibility, isOffsets, isNosize,
+                dom = me.dom,
+                visMode = getVisMode(dom);
+
 
             // hideMode string override
             if (typeof animate == 'string'){
-                isDisplay = animate == DISPLAY;
-                isVisible = animate == VISIBILITY;
-                isOffsets = animate == OFFSETS;
+                switch (animate) {
+                    case DISPLAY:
+                        visMode = El.DISPLAY;
+                        break;
+                    case VISIBILITY:
+                        visMode = El.VISIBILITY;
+                        break;
+                    case OFFSETS:
+                        visMode = El.OFFSETS;
+                        break;
+                    case NOSIZE:
+                    case ASCLASS:
+                        visMode = El.ASCLASS;
+                        break;
+                }
+                me.setVisibilityMode(visMode);
                 animate = false;
-            } else {
-                isDisplay = getVisMode(this.dom) == ELDISPLAY;
-                isVisible = !isDisplay;
             }
 
             if (!animate || !me.anim) {
-                if (isDisplay){
-                    me.setDisplayed(visible);
-                } else if (isOffsets){
-                    if (!visible){
-                        me.hideModeStyles = {
-                            position: me.getStyle('position'),
-                            top: me.getStyle('top'),
-                            left: me.getStyle('left')
-                        };
+                if(visMode == El.ASCLASS ){
 
+                    me[visible?'removeCls':'addCls'](me.visibilityCls || El.visibilityCls);
+
+                } else if (visMode == El.DISPLAY){
+
+                    return me.setDisplayed(visible);
+
+                } else if (visMode == El.OFFSETS){
+
+                    if (!visible){
+                        // Remember position for restoring, if we are not already hidden by offsets.
+                        if (!me.hideModeStyles) {
+                            me.hideModeStyles = {
+                                position: me.getStyle('position'),
+                                top: me.getStyle('top'),
+                                left: me.getStyle('left')
+                            };
+                        }
                         me.applyStyles({position: 'absolute', top: '-10000px', left: '-10000px'});
-                    } else {
+                    }
+
+                    // Only &quot;restore&quot; as position if we have actually been hidden using offsets.
+                    // Calling setVisible(true) on a positioned element should not reposition it.
+                    else if (me.hideModeStyles) {
                         me.applyStyles(me.hideModeStyles || {position: '', top: '', left: ''});
+                        delete me.hideModeStyles;
                     }
+
                 }else{
                     me.fixDisplay();
-                    dom.style.visibility = visible ? "visible" : HIDDEN;
+                    // Show by clearing visibility style. Explicitly setting to &quot;visible&quot; overrides parent visibility setting.
+                    dom.style.visibility = visible ? '' : HIDDEN;
                 }
             }else{
                 // closure for composites
-                if (visible){
-                    me.setOpacity(.01);
+                if(visible){
+                    me.setOpacity(0.01);
                     me.setVisible(true);
                 }
-                me.anim({opacity: { to: (visible?1:0) }},
-                        me.preanim(arguments, 1),
-                        null,
-                        .35,
-                        'easeIn',
-                        function(){
-                             if(!visible){
-                                 dom.style[isDisplay ? DISPLAY : VISIBILITY] = (isDisplay) ? NONE : HIDDEN;
-                                 Ext.fly(dom).setOpacity(1);
-                             }
-                        });
+                if (!Ext.isObject(animate)) {
+                    animate = {
+                        duration: 350,
+                        easing: 'ease-in'
+                    };
+                }
+                me.animate(Ext.applyIf({
+                    callback: function() {
+                        visible || me.setVisible(false).setOpacity(1);
+                    },
+                    to: {
+                        opacity: (visible) ? 1 : 0
+                    }
+                }, animate));
             }
+            data(dom, ISVISIBLE, visible);  //set logical visibility state
             return me;
         },
 
-        <div id="method-Ext.Element-toggle"></div>/**
-         * Toggles the element's visibility or display, depending on visibility mode.
+
+<span id='Ext-core-Element-method-hasMetrics'>        /**
+</span>         * @private
+         * Determine if the Element has a relevant height and width available based
+         * upon current logical visibility state
+         */
+        hasMetrics  : function(){
+            var dom = this.dom;
+            return this.isVisible() || (getVisMode(dom) == El.OFFSETS) || (getVisMode(dom) == El.VISIBILITY);
+        },
+
+<span id='Ext-core-Element-method-toggle'>        /**
+</span>         * Toggles the element's visibility or display, depending on visibility mode.
          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
-         * @return {Ext.Element} this
+         * @return {Ext.core.Element} this
          */
         toggle : function(animate){
             var me = this;
-            me.setVisible(!me.isVisible(), me.preanim(arguments, 0));
+            me.setVisible(!me.isVisible(), me.anim(animate));
             return me;
         },
 
-        <div id="method-Ext.Element-setDisplayed"></div>/**
-         * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
+<span id='Ext-core-Element-method-setDisplayed'>        /**
+</span>         * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
          * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.
-         * @return {Ext.Element} this
+         * @return {Ext.core.Element} this
          */
         setDisplayed : function(value) {
-            if(typeof value == "boolean"){
+            if(typeof value == &quot;boolean&quot;){
                value = value ? getDisplay(this.dom) : NONE;
             }
             this.setStyle(DISPLAY, value);
@@ -323,19 +250,19 @@ el.animate(
         // private
         fixDisplay : function(){
             var me = this;
-            if(me.isStyle(DISPLAY, NONE)){
+            if (me.isStyle(DISPLAY, NONE)) {
                 me.setStyle(VISIBILITY, HIDDEN);
                 me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default
-                if(me.isStyle(DISPLAY, NONE)){ // if that fails, default to block
-                    me.setStyle(DISPLAY, "block");
+                if (me.isStyle(DISPLAY, NONE)) { // if that fails, default to block
+                    me.setStyle(DISPLAY, &quot;block&quot;);
                 }
             }
         },
 
-        <div id="method-Ext.Element-hide"></div>/**
-         * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
+<span id='Ext-core-Element-method-hide'>        /**
+</span>         * Hide this element - Uses display mode to determine whether to use &quot;display&quot; or &quot;visibility&quot;. See {@link #setVisible}.
          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
-         * @return {Ext.Element} this
+         * @return {Ext.core.Element} this
          */
         hide : function(animate){
             // hideMode override
@@ -343,14 +270,14 @@ el.animate(
                 this.setVisible(false, animate);
                 return this;
             }
-            this.setVisible(false, this.preanim(arguments, 0));
+            this.setVisible(false, this.anim(animate));
             return this;
         },
 
-        <div id="method-Ext.Element-show"></div>/**
-        * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
+<span id='Ext-core-Element-method-show'>        /**
+</span>        * Show this element - Uses display mode to determine whether to use &quot;display&quot; or &quot;visibility&quot;. See {@link #setVisible}.
         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
-         * @return {Ext.Element} this
+         * @return {Ext.core.Element} this
          */
         show : function(animate){
             // hideMode override
@@ -358,11 +285,10 @@ el.animate(
                 this.setVisible(true, animate);
                 return this;
             }
-            this.setVisible(true, this.preanim(arguments, 0));
+            this.setVisible(true, this.anim(animate));
             return this;
         }
     };
-}());
-</pre>    
+}());</pre>
 </body>
-</html>
\ No newline at end of file
+</html>