docs/source/Element.fx.html

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