docs/source/Element.fx.html

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