docs/source/Element.fx.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-core-Element'>/**
  19 </span> * @class Ext.core.Element
  20  */
  21 <span id='Ext-core-Element-property-VISIBILITY'>/**
  22 </span> * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element
  23  * @static
  24  * @type Number
  25  */
  26 Ext.core.Element.VISIBILITY = 1;
  27 <span id='Ext-core-Element-property-DISPLAY'>/**
  28 </span> * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element
  29  * @static
  30  * @type Number
  31  */
  32 Ext.core.Element.DISPLAY = 2;
  33
  34 <span id='Ext-core-Element-property-OFFSETS'>/**
  35 </span> * Visibility mode constant for use with {@link #setVisibilityMode}. Use offsets (x and y positioning offscreen)
  36  * to hide element.
  37  * @static
  38  * @type Number
  39  */
  40 Ext.core.Element.OFFSETS = 3;
  41
  42
  43 Ext.core.Element.ASCLASS = 4;
  44
  45 <span id='Ext-core-Element-property-visibilityCls'>/**
  46 </span> * Defaults to 'x-hide-nosize'
  47  * @static
  48  * @type String
  49  */
  50 Ext.core.Element.visibilityCls = Ext.baseCSSPrefix + 'hide-nosize';
  51
  52 Ext.core.Element.addMethods(function(){
  53     var El = Ext.core.Element,
  54         OPACITY = &quot;opacity&quot;,
  55         VISIBILITY = &quot;visibility&quot;,
  56         DISPLAY = &quot;display&quot;,
  57         HIDDEN = &quot;hidden&quot;,
  58         OFFSETS = &quot;offsets&quot;,
  59         ASCLASS = &quot;asclass&quot;,
  60         NONE = &quot;none&quot;,
  61         NOSIZE = 'nosize',
  62         ORIGINALDISPLAY = 'originalDisplay',
  63         VISMODE = 'visibilityMode',
  64         ISVISIBLE = 'isVisible',
  65         data = El.data,
  66         getDisplay = function(dom){
  67             var d = data(dom, ORIGINALDISPLAY);
  68             if(d === undefined){
  69                 data(dom, ORIGINALDISPLAY, d = '');
  70             }
  71             return d;
  72         },
  73         getVisMode = function(dom){
  74             var m = data(dom, VISMODE);
  75             if(m === undefined){
  76                 data(dom, VISMODE, m = 1);
  77             }
  78             return m;
  79         };
  80
  81     return {
  82 <span id='Ext-core-Element-property-originalDisplay'>        /**
  83 </span>         * The element's default display mode  (defaults to &quot;&quot;)
  84          * @type String
  85          */
  86         originalDisplay : &quot;&quot;,
  87         visibilityMode : 1,
  88
  89 <span id='Ext-core-Element-method-setVisibilityMode'>        /**
  90 </span>         * Sets the element's visibility mode. When setVisible() is called it
  91          * will use this to determine whether to set the visibility or the display property.
  92          * @param {Number} visMode Ext.core.Element.VISIBILITY or Ext.core.Element.DISPLAY
  93          * @return {Ext.core.Element} this
  94          */
  95         setVisibilityMode : function(visMode){
  96             data(this.dom, VISMODE, visMode);
  97             return this;
  98         },
  99
 100 <span id='Ext-core-Element-method-isVisible'>        /**
 101 </span>         * Checks whether the element is currently visible using both visibility and display properties.
 102          * @return {Boolean} True if the element is currently visible, else false
 103          */
 104         isVisible : function() {
 105             var me = this,
 106                 dom = me.dom,
 107                 visible = data(dom, ISVISIBLE);
 108
 109             if(typeof visible == 'boolean'){ //return the cached value if registered
 110                 return visible;
 111             }
 112             //Determine the current state based on display states
 113             visible = !me.isStyle(VISIBILITY, HIDDEN) &amp;&amp;
 114                       !me.isStyle(DISPLAY, NONE) &amp;&amp;
 115                       !((getVisMode(dom) == El.ASCLASS) &amp;&amp; me.hasCls(me.visibilityCls || El.visibilityCls));
 116
 117             data(dom, ISVISIBLE, visible);
 118             return visible;
 119         },
 120
 121 <span id='Ext-core-Element-method-setVisible'>        /**
 122 </span>         * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
 123          * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
 124          * @param {Boolean} visible Whether the element is visible
 125          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
 126          * @return {Ext.core.Element} this
 127          */
 128         setVisible : function(visible, animate){
 129             var me = this, isDisplay, isVisibility, isOffsets, isNosize,
 130                 dom = me.dom,
 131                 visMode = getVisMode(dom);
 132
 133
 134             // hideMode string override
 135             if (typeof animate == 'string'){
 136                 switch (animate) {
 137                     case DISPLAY:
 138                         visMode = El.DISPLAY;
 139                         break;
 140                     case VISIBILITY:
 141                         visMode = El.VISIBILITY;
 142                         break;
 143                     case OFFSETS:
 144                         visMode = El.OFFSETS;
 145                         break;
 146                     case NOSIZE:
 147                     case ASCLASS:
 148                         visMode = El.ASCLASS;
 149                         break;
 150                 }
 151                 me.setVisibilityMode(visMode);
 152                 animate = false;
 153             }
 154
 155             if (!animate || !me.anim) {
 156                 if(visMode == El.ASCLASS ){
 157
 158                     me[visible?'removeCls':'addCls'](me.visibilityCls || El.visibilityCls);
 159
 160                 } else if (visMode == El.DISPLAY){
 161
 162                     return me.setDisplayed(visible);
 163
 164                 } else if (visMode == El.OFFSETS){
 165
 166                     if (!visible){
 167                         // Remember position for restoring, if we are not already hidden by offsets.
 168                         if (!me.hideModeStyles) {
 169                             me.hideModeStyles = {
 170                                 position: me.getStyle('position'),
 171                                 top: me.getStyle('top'),
 172                                 left: me.getStyle('left')
 173                             };
 174                         }
 175                         me.applyStyles({position: 'absolute', top: '-10000px', left: '-10000px'});
 176                     }
 177
 178                     // Only &quot;restore&quot; as position if we have actually been hidden using offsets.
 179                     // Calling setVisible(true) on a positioned element should not reposition it.
 180                     else if (me.hideModeStyles) {
 181                         me.applyStyles(me.hideModeStyles || {position: '', top: '', left: ''});
 182                         delete me.hideModeStyles;
 183                     }
 184
 185                 }else{
 186                     me.fixDisplay();
 187                     // Show by clearing visibility style. Explicitly setting to &quot;visible&quot; overrides parent visibility setting.
 188                     dom.style.visibility = visible ? '' : HIDDEN;
 189                 }
 190             }else{
 191                 // closure for composites
 192                 if(visible){
 193                     me.setOpacity(0.01);
 194                     me.setVisible(true);
 195                 }
 196                 if (!Ext.isObject(animate)) {
 197                     animate = {
 198                         duration: 350,
 199                         easing: 'ease-in'
 200                     };
 201                 }
 202                 me.animate(Ext.applyIf({
 203                     callback: function() {
 204                         visible || me.setVisible(false).setOpacity(1);
 205                     },
 206                     to: {
 207                         opacity: (visible) ? 1 : 0
 208                     }
 209                 }, animate));
 210             }
 211             data(dom, ISVISIBLE, visible);  //set logical visibility state
 212             return me;
 213         },
 214
 215
 216 <span id='Ext-core-Element-method-hasMetrics'>        /**
 217 </span>         * @private
 218          * Determine if the Element has a relevant height and width available based
 219          * upon current logical visibility state
 220          */
 221         hasMetrics  : function(){
 222             var dom = this.dom;
 223             return this.isVisible() || (getVisMode(dom) == El.OFFSETS) || (getVisMode(dom) == El.VISIBILITY);
 224         },
 225
 226 <span id='Ext-core-Element-method-toggle'>        /**
 227 </span>         * Toggles the element's visibility or display, depending on visibility mode.
 228          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
 229          * @return {Ext.core.Element} this
 230          */
 231         toggle : function(animate){
 232             var me = this;
 233             me.setVisible(!me.isVisible(), me.anim(animate));
 234             return me;
 235         },
 236
 237 <span id='Ext-core-Element-method-setDisplayed'>        /**
 238 </span>         * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
 239          * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.
 240          * @return {Ext.core.Element} this
 241          */
 242         setDisplayed : function(value) {
 243             if(typeof value == &quot;boolean&quot;){
 244                value = value ? getDisplay(this.dom) : NONE;
 245             }
 246             this.setStyle(DISPLAY, value);
 247             return this;
 248         },
 249
 250         // private
 251         fixDisplay : function(){
 252             var me = this;
 253             if (me.isStyle(DISPLAY, NONE)) {
 254                 me.setStyle(VISIBILITY, HIDDEN);
 255                 me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default
 256                 if (me.isStyle(DISPLAY, NONE)) { // if that fails, default to block
 257                     me.setStyle(DISPLAY, &quot;block&quot;);
 258                 }
 259             }
 260         },
 261
 262 <span id='Ext-core-Element-method-hide'>        /**
 263 </span>         * Hide this element - Uses display mode to determine whether to use &quot;display&quot; or &quot;visibility&quot;. See {@link #setVisible}.
 264          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
 265          * @return {Ext.core.Element} this
 266          */
 267         hide : function(animate){
 268             // hideMode override
 269             if (typeof animate == 'string'){
 270                 this.setVisible(false, animate);
 271                 return this;
 272             }
 273             this.setVisible(false, this.anim(animate));
 274             return this;
 275         },
 276
 277 <span id='Ext-core-Element-method-show'>        /**
 278 </span>        * Show this element - Uses display mode to determine whether to use &quot;display&quot; or &quot;visibility&quot;. See {@link #setVisible}.
 279         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
 280          * @return {Ext.core.Element} this
 281          */
 282         show : function(animate){
 283             // hideMode override
 284             if (typeof animate == 'string'){
 285                 this.setVisible(true, animate);
 286                 return this;
 287             }
 288             this.setVisible(true, this.anim(animate));
 289             return this;
 290         }
 291     };
 292 }());</pre>
 293 </body>
 294 </html>