docs/source/Element.fx.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   8     <pre class="prettyprint lang-js">/*!
   9  * Ext JS Library 3.0.3
  10  * Copyright(c) 2006-2009 Ext JS, LLC
  11  * licensing@extjs.com
  12  * http://www.extjs.com/license
  13  */
  14 <div id="cls-Ext.Element"></div>/**\r
  15  * @class Ext.Element\r
  16  */\r
  17 <div id="prop-Ext.Element-VISIBILITY"></div>/**\r
  18  * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element\r
  19  * @static\r
  20  * @type Number\r
  21  */\r
  22 Ext.Element.VISIBILITY = 1;\r
  23 <div id="prop-Ext.Element-DISPLAY"></div>/**\r
  24  * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element\r
  25  * @static\r
  26  * @type Number\r
  27  */\r
  28 Ext.Element.DISPLAY = 2;\r
  29 \r
  30 Ext.Element.addMethods(function(){\r
  31     var VISIBILITY = "visibility",\r
  32         DISPLAY = "display",\r
  33         HIDDEN = "hidden",\r
  34         NONE = "none",      \r
  35         ORIGINALDISPLAY = 'originalDisplay',\r
  36         VISMODE = 'visibilityMode',\r
  37         ELDISPLAY = Ext.Element.DISPLAY,\r
  38         data = Ext.Element.data,\r
  39         getDisplay = function(dom){\r
  40             var d = data(dom, ORIGINALDISPLAY);\r
  41             if(d === undefined){\r
  42                 data(dom, ORIGINALDISPLAY, d = '');\r
  43             }\r
  44             return d;\r
  45         },\r
  46         getVisMode = function(dom){\r
  47             var m = data(dom, VISMODE);\r
  48             if(m === undefined){\r
  49                 data(dom, VISMODE, m = 1)\r
  50             }\r
  51             return m;\r
  52         };\r
  53     \r
  54     return {\r
  55         <div id="prop-Ext.Element-originalDisplay"></div>/**\r
  56          * The element's default display mode  (defaults to "")\r
  57          * @type String\r
  58          */\r
  59         originalDisplay : "",\r
  60         visibilityMode : 1,\r
  61         \r
  62         <div id="method-Ext.Element-setVisibilityMode"></div>/**\r
  63          * Sets the element's visibility mode. When setVisible() is called it\r
  64          * will use this to determine whether to set the visibility or the display property.\r
  65          * @param {Number} visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY\r
  66          * @return {Ext.Element} this\r
  67          */\r
  68         setVisibilityMode : function(visMode){  \r
  69             data(this.dom, VISMODE, visMode);\r
  70             return this;\r
  71         },\r
  72         \r
  73         <div id="method-Ext.Element-animate"></div>/**\r
  74          * Perform custom animation on this element.\r
  75          * <div><ul class="mdetail-params">\r
  76          * <li><u>Animation Properties</u></li>\r
  77          * \r
  78          * <p>The Animation Control Object enables gradual transitions for any member of an\r
  79          * element's style object that takes a numeric value including but not limited to\r
  80          * these properties:</p><div><ul class="mdetail-params">\r
  81          * <li><tt>bottom, top, left, right</tt></li>\r
  82          * <li><tt>height, width</tt></li>\r
  83          * <li><tt>margin, padding</tt></li>\r
  84          * <li><tt>borderWidth</tt></li>\r
  85          * <li><tt>opacity</tt></li>\r
  86          * <li><tt>fontSize</tt></li>\r
  87          * <li><tt>lineHeight</tt></li>\r
  88          * </ul></div>\r
  89          * \r
  90          * \r
  91          * <li><u>Animation Property Attributes</u></li>\r
  92          * \r
  93          * <p>Each Animation Property is a config object with optional properties:</p>\r
  94          * <div><ul class="mdetail-params">\r
  95          * <li><tt>by</tt>*  : relative change - start at current value, change by this value</li>\r
  96          * <li><tt>from</tt> : ignore current value, start from this value</li>\r
  97          * <li><tt>to</tt>*  : start at current value, go to this value</li>\r
  98          * <li><tt>unit</tt> : any allowable unit specification</li>\r
  99          * <p>* do not specify both <tt>to</tt> and <tt>by</tt> for an animation property</p>\r
 100          * </ul></div>\r
 101          * \r
 102          * <li><u>Animation Types</u></li>\r
 103          * \r
 104          * <p>The supported animation types:</p><div><ul class="mdetail-params">\r
 105          * <li><tt>'run'</tt> : Default\r
 106          * <pre><code>\r
 107 var el = Ext.get('complexEl');\r
 108 el.animate(\r
 109     // animation control object\r
 110     {\r
 111         borderWidth: {to: 3, from: 0},\r
 112         opacity: {to: .3, from: 1},\r
 113         height: {to: 50, from: el.getHeight()},\r
 114         width: {to: 300, from: el.getWidth()},\r
 115         top  : {by: - 100, unit: 'px'},\r
 116     },\r
 117     0.35,      // animation duration\r
 118     null,      // callback\r
 119     'easeOut', // easing method\r
 120     'run'      // animation type ('run','color','motion','scroll')    \r
 121 );\r
 122          * </code></pre>\r
 123          * </li>\r
 124          * <li><tt>'color'</tt>\r
 125          * <p>Animates transition of background, text, or border colors.</p>\r
 126          * <pre><code>\r
 127 el.animate(\r
 128     // animation control object\r
 129     {\r
 130         color: { to: '#06e' },\r
 131         backgroundColor: { to: '#e06' }\r
 132     },\r
 133     0.35,      // animation duration\r
 134     null,      // callback\r
 135     'easeOut', // easing method\r
 136     'color'    // animation type ('run','color','motion','scroll')    \r
 137 );\r
 138          * </code></pre> \r
 139          * </li>\r
 140          * \r
 141          * <li><tt>'motion'</tt>\r
 142          * <p>Animates the motion of an element to/from specific points using optional bezier\r
 143          * way points during transit.</p>\r
 144          * <pre><code>\r
 145 el.animate(\r
 146     // animation control object\r
 147     {\r
 148         borderWidth: {to: 3, from: 0},\r
 149         opacity: {to: .3, from: 1},\r
 150         height: {to: 50, from: el.getHeight()},\r
 151         width: {to: 300, from: el.getWidth()},\r
 152         top  : {by: - 100, unit: 'px'},\r
 153         points: {\r
 154             to: [50, 100],  // go to this point\r
 155             control: [      // optional bezier way points\r
 156                 [ 600, 800],\r
 157                 [-100, 200]\r
 158             ]\r
 159         }\r
 160     },\r
 161     3000,      // animation duration (milliseconds!)\r
 162     null,      // callback\r
 163     'easeOut', // easing method\r
 164     'motion'   // animation type ('run','color','motion','scroll')    \r
 165 );\r
 166          * </code></pre> \r
 167          * </li>\r
 168          * <li><tt>'scroll'</tt>\r
 169          * <p>Animate horizontal or vertical scrolling of an overflowing page element.</p>\r
 170          * <pre><code>\r
 171 el.animate(\r
 172     // animation control object\r
 173     {\r
 174         scroll: {to: [400, 300]}\r
 175     },\r
 176     0.35,      // animation duration\r
 177     null,      // callback\r
 178     'easeOut', // easing method\r
 179     'scroll'   // animation type ('run','color','motion','scroll')    \r
 180 );\r
 181          * </code></pre> \r
 182          * </li>\r
 183          * </ul></div>\r
 184          * \r
 185          * </ul></div>\r
 186          * \r
 187          * @param {Object} args The animation control args\r
 188          * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to <tt>.35</tt>)\r
 189          * @param {Function} onComplete (optional) Function to call when animation completes\r
 190          * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to <tt>'easeOut'</tt>)\r
 191          * @param {String} animType (optional) <tt>'run'</tt> is the default. Can also be <tt>'color'</tt>,\r
 192          * <tt>'motion'</tt>, or <tt>'scroll'</tt>\r
 193          * @return {Ext.Element} this\r
 194          */\r
 195         animate : function(args, duration, onComplete, easing, animType){       \r
 196             this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);\r
 197             return this;\r
 198         },\r
 199     \r
 200         /*\r
 201          * @private Internal animation call\r
 202          */\r
 203         anim : function(args, opt, animType, defaultDur, defaultEase, cb){\r
 204             animType = animType || 'run';\r
 205             opt = opt || {};\r
 206             var me = this,              \r
 207                 anim = Ext.lib.Anim[animType](\r
 208                     me.dom, \r
 209                     args,\r
 210                     (opt.duration || defaultDur) || .35,\r
 211                     (opt.easing || defaultEase) || 'easeOut',\r
 212                     function(){\r
 213                         if(cb) cb.call(me);\r
 214                         if(opt.callback) opt.callback.call(opt.scope || me, me, opt);\r
 215                     },\r
 216                     me\r
 217                 );\r
 218             opt.anim = anim;\r
 219             return anim;\r
 220         },\r
 221     \r
 222         // private legacy anim prep\r
 223         preanim : function(a, i){\r
 224             return !a[i] ? false : (Ext.isObject(a[i]) ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});\r
 225         },\r
 226         \r
 227         <div id="method-Ext.Element-isVisible"></div>/**\r
 228          * Checks whether the element is currently visible using both visibility and display properties.         \r
 229          * @return {Boolean} True if the element is currently visible, else false\r
 230          */\r
 231         isVisible : function() {\r
 232             return !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE);\r
 233         },\r
 234         \r
 235         <div id="method-Ext.Element-setVisible"></div>/**\r
 236          * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use\r
 237          * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.\r
 238          * @param {Boolean} visible Whether the element is visible\r
 239          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
 240          * @return {Ext.Element} this\r
 241          */\r
 242          setVisible : function(visible, animate){\r
 243             var me = this,\r
 244                 dom = me.dom,\r
 245                 isDisplay = getVisMode(this.dom) == ELDISPLAY;\r
 246                 \r
 247             if (!animate || !me.anim) {\r
 248                 if(isDisplay){\r
 249                     me.setDisplayed(visible);\r
 250                 }else{\r
 251                     me.fixDisplay();\r
 252                     dom.style.visibility = visible ? "visible" : HIDDEN;\r
 253                 }\r
 254             }else{\r
 255                 // closure for composites            \r
 256                 if(visible){\r
 257                     me.setOpacity(.01);\r
 258                     me.setVisible(true);\r
 259                 }\r
 260                 me.anim({opacity: { to: (visible?1:0) }},\r
 261                         me.preanim(arguments, 1),\r
 262                         null,\r
 263                         .35,\r
 264                         'easeIn',\r
 265                         function(){\r
 266                              if(!visible){\r
 267                                  dom.style[isDisplay ? DISPLAY : VISIBILITY] = (isDisplay) ? NONE : HIDDEN;                     \r
 268                                  Ext.fly(dom).setOpacity(1);\r
 269                              }\r
 270                         });\r
 271             }\r
 272             return me;\r
 273         },\r
 274     \r
 275         <div id="method-Ext.Element-toggle"></div>/**\r
 276          * Toggles the element's visibility or display, depending on visibility mode.\r
 277          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
 278          * @return {Ext.Element} this\r
 279          */\r
 280         toggle : function(animate){\r
 281             var me = this;\r
 282             me.setVisible(!me.isVisible(), me.preanim(arguments, 0));\r
 283             return me;\r
 284         },\r
 285     \r
 286         <div id="method-Ext.Element-setDisplayed"></div>/**\r
 287          * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.\r
 288          * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.\r
 289          * @return {Ext.Element} this\r
 290          */\r
 291         setDisplayed : function(value) {            \r
 292             if(typeof value == "boolean"){\r
 293                value = value ? getDisplay(this.dom) : NONE;\r
 294             }\r
 295             this.setStyle(DISPLAY, value);\r
 296             return this;\r
 297         },\r
 298         \r
 299         // private\r
 300         fixDisplay : function(){\r
 301             var me = this;\r
 302             if(me.isStyle(DISPLAY, NONE)){\r
 303                 me.setStyle(VISIBILITY, HIDDEN);\r
 304                 me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default\r
 305                 if(me.isStyle(DISPLAY, NONE)){ // if that fails, default to block\r
 306                     me.setStyle(DISPLAY, "block");\r
 307                 }\r
 308             }\r
 309         },\r
 310     \r
 311         <div id="method-Ext.Element-hide"></div>/**\r
 312          * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.\r
 313          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
 314          * @return {Ext.Element} this\r
 315          */\r
 316         hide : function(animate){\r
 317             this.setVisible(false, this.preanim(arguments, 0));\r
 318             return this;\r
 319         },\r
 320     \r
 321         <div id="method-Ext.Element-show"></div>/**\r
 322         * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.\r
 323         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
 324          * @return {Ext.Element} this\r
 325          */\r
 326         show : function(animate){\r
 327             this.setVisible(true, this.preanim(arguments, 0));\r
 328             return this;\r
 329         }\r
 330     }\r
 331 }());</pre>
 332 </body>
 333 </html>