Upgrade to ExtJS 3.2.1 - Released 04/27/2010
[extjs.git] / docs / source / Element.fx.html
index a194593..1bef778 100644 (file)
-<html>\r
-<head>\r
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
-  <title>The source code</title>\r
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body  onload="prettyPrint();">\r
-    <pre class="prettyprint lang-js">/**\r
- * @class Ext.Element\r
- */\r
-<div id="prop-Ext.Element-VISIBILITY"></div>/**\r
- * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element\r
- * @static\r
- * @type Number\r
- */\r
-Ext.Element.VISIBILITY = 1;\r
-<div id="prop-Ext.Element-DISPLAY"></div>/**\r
- * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element\r
- * @static\r
- * @type Number\r
- */\r
-Ext.Element.DISPLAY = 2;\r
-\r
-Ext.Element.addMethods(function(){\r
-    var VISIBILITY = "visibility",\r
-        DISPLAY = "display",\r
-        HIDDEN = "hidden",\r
-        NONE = "none",      \r
-        ORIGINALDISPLAY = 'originalDisplay',\r
-        VISMODE = 'visibilityMode',\r
-        ELDISPLAY = Ext.Element.DISPLAY,\r
-        data = Ext.Element.data,\r
-        getDisplay = function(dom){\r
-            var d = data(dom, ORIGINALDISPLAY);\r
-            if(d === undefined){\r
-                data(dom, ORIGINALDISPLAY, d = '');\r
-            }\r
-            return d;\r
-        },\r
-        getVisMode = function(dom){\r
-            var m = data(dom, VISMODE);\r
-            if(m === undefined){\r
-                data(dom, VISMODE, m = 1)\r
-            }\r
-            return m;\r
-        };\r
-    \r
-    return {\r
-        <div id="prop-Ext.Element-originalDisplay"></div>/**\r
-         * The element's default display mode  (defaults to "")\r
-         * @type String\r
-         */\r
-        originalDisplay : "",\r
-        visibilityMode : 1,\r
-        \r
-        <div id="method-Ext.Element-setVisibilityMode"></div>/**\r
-         * Sets the element's visibility mode. When setVisible() is called it\r
-         * will use this to determine whether to set the visibility or the display property.\r
-         * @param {Number} visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY\r
-         * @return {Ext.Element} this\r
-         */\r
-        setVisibilityMode : function(visMode){  \r
-            data(this.dom, VISMODE, visMode);\r
-            return this;\r
-        },\r
-        \r
-        <div id="method-Ext.Element-animate"></div>/**\r
-         * Perform custom animation on this element.\r
-         * <div><ul class="mdetail-params">\r
-         * <li><u>Animation Properties</u></li>\r
-         * \r
-         * <p>The Animation Control Object enables gradual transitions for any member of an\r
-         * element's style object that takes a numeric value including but not limited to\r
-         * these properties:</p><div><ul class="mdetail-params">\r
-         * <li><tt>bottom, top, left, right</tt></li>\r
-         * <li><tt>height, width</tt></li>\r
-         * <li><tt>margin, padding</tt></li>\r
-         * <li><tt>borderWidth</tt></li>\r
-         * <li><tt>opacity</tt></li>\r
-         * <li><tt>fontSize</tt></li>\r
-         * <li><tt>lineHeight</tt></li>\r
-         * </ul></div>\r
-         * \r
-         * \r
-         * <li><u>Animation Property Attributes</u></li>\r
-         * \r
-         * <p>Each Animation Property is a config object with optional properties:</p>\r
-         * <div><ul class="mdetail-params">\r
-         * <li><tt>by</tt>*  : relative change - start at current value, change by this value</li>\r
-         * <li><tt>from</tt> : ignore current value, start from this value</li>\r
-         * <li><tt>to</tt>*  : start at current value, go to this value</li>\r
-         * <li><tt>unit</tt> : any allowable unit specification</li>\r
-         * <p>* do not specify both <tt>to</tt> and <tt>by</tt> for an animation property</p>\r
-         * </ul></div>\r
-         * \r
-         * <li><u>Animation Types</u></li>\r
-         * \r
-         * <p>The supported animation types:</p><div><ul class="mdetail-params">\r
-         * <li><tt>'run'</tt> : Default\r
-         * <pre><code>\r
-var el = Ext.get('complexEl');\r
-el.animate(\r
-    // animation control object\r
-    {\r
-        borderWidth: {to: 3, from: 0},\r
-        opacity: {to: .3, from: 1},\r
-        height: {to: 50, from: el.getHeight()},\r
-        width: {to: 300, from: el.getWidth()},\r
-        top  : {by: - 100, unit: 'px'},\r
-    },\r
-    0.35,      // animation duration\r
-    null,      // callback\r
-    'easeOut', // easing method\r
-    'run'      // animation type ('run','color','motion','scroll')    \r
-);\r
-         * </code></pre>\r
-         * </li>\r
-         * <li><tt>'color'</tt>\r
-         * <p>Animates transition of background, text, or border colors.</p>\r
-         * <pre><code>\r
-el.animate(\r
-    // animation control object\r
-    {\r
-        color: { to: '#06e' },\r
-        backgroundColor: { to: '#e06' }\r
-    },\r
-    0.35,      // animation duration\r
-    null,      // callback\r
-    'easeOut', // easing method\r
-    'color'    // animation type ('run','color','motion','scroll')    \r
-);\r
-         * </code></pre> \r
-         * </li>\r
-         * \r
-         * <li><tt>'motion'</tt>\r
-         * <p>Animates the motion of an element to/from specific points using optional bezier\r
-         * way points during transit.</p>\r
-         * <pre><code>\r
-el.animate(\r
-    // animation control object\r
-    {\r
-        borderWidth: {to: 3, from: 0},\r
-        opacity: {to: .3, from: 1},\r
-        height: {to: 50, from: el.getHeight()},\r
-        width: {to: 300, from: el.getWidth()},\r
-        top  : {by: - 100, unit: 'px'},\r
-        points: {\r
-            to: [50, 100],  // go to this point\r
-            control: [      // optional bezier way points\r
-                [ 600, 800],\r
-                [-100, 200]\r
-            ]\r
-        }\r
-    },\r
-    3000,      // animation duration (milliseconds!)\r
-    null,      // callback\r
-    'easeOut', // easing method\r
-    'motion'   // animation type ('run','color','motion','scroll')    \r
-);\r
-         * </code></pre> \r
-         * </li>\r
-         * <li><tt>'scroll'</tt>\r
-         * <p>Animate horizontal or vertical scrolling of an overflowing page element.</p>\r
-         * <pre><code>\r
-el.animate(\r
-    // animation control object\r
-    {\r
-        scroll: {to: [400, 300]}\r
-    },\r
-    0.35,      // animation duration\r
-    null,      // callback\r
-    'easeOut', // easing method\r
-    'scroll'   // animation type ('run','color','motion','scroll')    \r
-);\r
-         * </code></pre> \r
-         * </li>\r
-         * </ul></div>\r
-         * \r
-         * </ul></div>\r
-         * \r
-         * @param {Object} args The animation control args\r
-         * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to <tt>.35</tt>)\r
-         * @param {Function} onComplete (optional) Function to call when animation completes\r
-         * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to <tt>'easeOut'</tt>)\r
-         * @param {String} animType (optional) <tt>'run'</tt> is the default. Can also be <tt>'color'</tt>,\r
-         * <tt>'motion'</tt>, or <tt>'scroll'</tt>\r
-         * @return {Ext.Element} this\r
-         */\r
-        animate : function(args, duration, onComplete, easing, animType){       \r
-            this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);\r
-            return this;\r
-        },\r
-    \r
-        /*\r
-         * @private Internal animation call\r
-         */\r
-        anim : function(args, opt, animType, defaultDur, defaultEase, cb){\r
-            animType = animType || 'run';\r
-            opt = opt || {};\r
-            var me = this,              \r
-                anim = Ext.lib.Anim[animType](\r
-                    me.dom, \r
-                    args,\r
-                    (opt.duration || defaultDur) || .35,\r
-                    (opt.easing || defaultEase) || 'easeOut',\r
-                    function(){\r
-                        if(cb) cb.call(me);\r
-                        if(opt.callback) opt.callback.call(opt.scope || me, me, opt);\r
-                    },\r
-                    me\r
-                );\r
-            opt.anim = anim;\r
-            return anim;\r
-        },\r
-    \r
-        // private legacy anim prep\r
-        preanim : function(a, i){\r
-            return !a[i] ? false : (Ext.isObject(a[i]) ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});\r
-        },\r
-        \r
-        <div id="method-Ext.Element-isVisible"></div>/**\r
-         * Checks whether the element is currently visible using both visibility and display properties.         \r
-         * @return {Boolean} True if the element is currently visible, else false\r
-         */\r
-        isVisible : function() {\r
-            return !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE);\r
-        },\r
-        \r
-        <div id="method-Ext.Element-setVisible"></div>/**\r
-         * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use\r
-         * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.\r
-         * @param {Boolean} visible Whether the element is visible\r
-         * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
-         * @return {Ext.Element} this\r
-         */\r
-         setVisible : function(visible, animate){\r
-            var me = this,\r
-                dom = me.dom,\r
-                isDisplay = getVisMode(this.dom) == ELDISPLAY;\r
-                \r
-            if (!animate || !me.anim) {\r
-                if(isDisplay){\r
-                    me.setDisplayed(visible);\r
-                }else{\r
-                    me.fixDisplay();\r
-                    dom.style.visibility = visible ? "visible" : HIDDEN;\r
-                }\r
-            }else{\r
-                // closure for composites            \r
-                if(visible){\r
-                    me.setOpacity(.01);\r
-                    me.setVisible(true);\r
-                }\r
-                me.anim({opacity: { to: (visible?1:0) }},\r
-                        me.preanim(arguments, 1),\r
-                        null,\r
-                        .35,\r
-                        'easeIn',\r
-                        function(){\r
-                             if(!visible){\r
-                                 dom.style[isDisplay ? DISPLAY : VISIBILITY] = (isDisplay) ? NONE : HIDDEN;                     \r
-                                 Ext.fly(dom).setOpacity(1);\r
-                             }\r
-                        });\r
-            }\r
-            return me;\r
-        },\r
-    \r
-        <div id="method-Ext.Element-toggle"></div>/**\r
-         * Toggles the element's visibility or display, depending on visibility mode.\r
-         * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
-         * @return {Ext.Element} this\r
-         */\r
-        toggle : function(animate){\r
-            var me = this;\r
-            me.setVisible(!me.isVisible(), me.preanim(arguments, 0));\r
-            return me;\r
-        },\r
-    \r
-        <div id="method-Ext.Element-setDisplayed"></div>/**\r
-         * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.\r
-         * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.\r
-         * @return {Ext.Element} this\r
-         */\r
-        setDisplayed : function(value) {            \r
-            if(typeof value == "boolean"){\r
-               value = value ? getDisplay(this.dom) : NONE;\r
-            }\r
-            this.setStyle(DISPLAY, value);\r
-            return this;\r
-        },\r
-        \r
-        // private\r
-        fixDisplay : function(){\r
-            var me = this;\r
-            if(me.isStyle(DISPLAY, NONE)){\r
-                me.setStyle(VISIBILITY, HIDDEN);\r
-                me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default\r
-                if(me.isStyle(DISPLAY, NONE)){ // if that fails, default to block\r
-                    me.setStyle(DISPLAY, "block");\r
-                }\r
-            }\r
-        },\r
-    \r
-        <div id="method-Ext.Element-hide"></div>/**\r
-         * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.\r
-         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
-         * @return {Ext.Element} this\r
-         */\r
-        hide : function(animate){\r
-            this.setVisible(false, this.preanim(arguments, 0));\r
-            return this;\r
-        },\r
-    \r
-        <div id="method-Ext.Element-show"></div>/**\r
-        * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.\r
-        * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
-         * @return {Ext.Element} this\r
-         */\r
-        show : function(animate){\r
-            this.setVisible(true, this.preanim(arguments, 0));\r
-            return this;\r
-        }\r
-    }\r
-}());</pre>    \r
-</body>\r
+<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>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.2.1
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**
+ * @class Ext.Element
+ */
+<div id="prop-Ext.Element-VISIBILITY"></div>/**
+ * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility 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
+ * @static
+ * @type Number
+ */
+Ext.Element.DISPLAY = 2;
+
+Ext.Element.addMethods(function(){
+    var VISIBILITY = "visibility",
+        DISPLAY = "display",
+        HIDDEN = "hidden",
+        OFFSETS = "offsets",
+        NONE = "none",
+        ORIGINALDISPLAY = 'originalDisplay',
+        VISMODE = 'visibilityMode',
+        ELDISPLAY = Ext.Element.DISPLAY,
+        data = Ext.Element.data,
+        getDisplay = function(dom){
+            var d = data(dom, ORIGINALDISPLAY);
+            if(d === undefined){
+                data(dom, ORIGINALDISPLAY, d = '');
+            }
+            return d;
+        },
+        getVisMode = function(dom){
+            var m = data(dom, VISMODE);
+            if(m === undefined){
+                data(dom, VISMODE, m = 1);
+            }
+            return m;
+        };
+
+    return {
+        <div id="prop-Ext.Element-originalDisplay"></div>/**
+         * The element's default display mode  (defaults to "")
+         * @type String
+         */
+        originalDisplay : "",
+        visibilityMode : 1,
+
+        <div id="method-Ext.Element-setVisibilityMode"></div>/**
+         * 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
+         */
+        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
+         */
+        anim : function(args, opt, animType, defaultDur, defaultEase, cb){
+            animType = animType || 'run';
+            opt = opt || {};
+            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;
+        },
+
+        // 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]});
+        },
+
+        <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);
+        },
+
+        <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
+         * 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
+         */
+         setVisible : function(visible, animate){
+            var me = this, isDisplay, isVisible, isOffsets,
+                dom = me.dom;
+
+            // hideMode string override
+            if (typeof animate == 'string'){
+                isDisplay = animate == DISPLAY;
+                isVisible = animate == VISIBILITY;
+                isOffsets = animate == OFFSETS;
+                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')
+                        };
+
+                        me.applyStyles({position: 'absolute', top: '-10000px', left: '-10000px'});
+                    } else {
+                        me.applyStyles(me.hideModeStyles || {position: '', top: '', left: ''});
+                    }
+                }else{
+                    me.fixDisplay();
+                    dom.style.visibility = visible ? "visible" : HIDDEN;
+                }
+            }else{
+                // closure for composites
+                if (visible){
+                    me.setOpacity(.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);
+                             }
+                        });
+            }
+            return me;
+        },
+
+        <div id="method-Ext.Element-toggle"></div>/**
+         * 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
+         */
+        toggle : function(animate){
+            var me = this;
+            me.setVisible(!me.isVisible(), me.preanim(arguments, 0));
+            return me;
+        },
+
+        <div id="method-Ext.Element-setDisplayed"></div>/**
+         * 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
+         */
+        setDisplayed : function(value) {
+            if(typeof value == "boolean"){
+               value = value ? getDisplay(this.dom) : NONE;
+            }
+            this.setStyle(DISPLAY, value);
+            return this;
+        },
+
+        // private
+        fixDisplay : function(){
+            var me = this;
+            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");
+                }
+            }
+        },
+
+        <div id="method-Ext.Element-hide"></div>/**
+         * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
+         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+         * @return {Ext.Element} this
+         */
+        hide : function(animate){
+            // hideMode override
+            if (typeof animate == 'string'){
+                this.setVisible(false, animate);
+                return this;
+            }
+            this.setVisible(false, this.preanim(arguments, 0));
+            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}.
+        * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+         * @return {Ext.Element} this
+         */
+        show : function(animate){
+            // hideMode override
+            if (typeof animate == 'string'){
+                this.setVisible(true, animate);
+                return this;
+            }
+            this.setVisible(true, this.preanim(arguments, 0));
+            return this;
+        }
+    };
+}());
+</pre>    
+</body>
 </html>
\ No newline at end of file
 </html>
\ No newline at end of file