docs/source/Shadow.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-Shadow-method-constructor'><span id='Ext-Shadow'>/**
   2 </span></span> * @class Ext.Shadow
   3  * Simple class that can provide a shadow effect for any element.  Note that the element MUST be absolutely positioned,
   4  * and the shadow does not provide any shimming.  This should be used only in simple cases -- for more advanced
   5  * functionality that can also provide the same shadow effect, see the {@link Ext.Layer} class.
   6  * @constructor
   7  * Create a new Shadow
   8  * @param {Object} config The config object
   9  */
  10 Ext.define('Ext.Shadow', {
  11     requires: ['Ext.ShadowPool'],
  12
  13     constructor: function(config) {
  14         Ext.apply(this, config);
  15         if (typeof this.mode != &quot;string&quot;) {
  16             this.mode = this.defaultMode;
  17         }
  18         var offset = this.offset,
  19             adjusts = {
  20                 h: 0
  21             },
  22             rad = Math.floor(this.offset / 2);
  23
  24         switch (this.mode.toLowerCase()) {
  25             // all this hideous nonsense calculates the various offsets for shadows
  26             case &quot;drop&quot;:
  27                 if (Ext.supports.CSS3BoxShadow) {
  28                     adjusts.w = adjusts.h = -offset;
  29                     adjusts.l = adjusts.t = offset;
  30                 } else {
  31                     adjusts.w = 0;
  32                     adjusts.l = adjusts.t = offset;
  33                     adjusts.t -= 1;
  34                     if (Ext.isIE) {
  35                         adjusts.l -= offset + rad;
  36                         adjusts.t -= offset + rad;
  37                         adjusts.w -= rad;
  38                         adjusts.h -= rad;
  39                         adjusts.t += 1;
  40                     }
  41                 }
  42                 break;
  43             case &quot;sides&quot;:
  44                 if (Ext.supports.CSS3BoxShadow) {
  45                     adjusts.h -= offset;
  46                     adjusts.t = offset;
  47                     adjusts.l = adjusts.w = 0;
  48                 } else {
  49                     adjusts.w = (offset * 2);
  50                     adjusts.l = -offset;
  51                     adjusts.t = offset - 1;
  52                     if (Ext.isIE) {
  53                         adjusts.l -= (offset - rad);
  54                         adjusts.t -= offset + rad;
  55                         adjusts.l += 1;
  56                         adjusts.w -= (offset - rad) * 2;
  57                         adjusts.w -= rad + 1;
  58                         adjusts.h -= 1;
  59                     }
  60                 }
  61                 break;
  62             case &quot;frame&quot;:
  63                 if (Ext.supports.CSS3BoxShadow) {
  64                     adjusts.l = adjusts.w = adjusts.t = 0;
  65                 } else {
  66                     adjusts.w = adjusts.h = (offset * 2);
  67                     adjusts.l = adjusts.t = -offset;
  68                     adjusts.t += 1;
  69                     adjusts.h -= 2;
  70                     if (Ext.isIE) {
  71                         adjusts.l -= (offset - rad);
  72                         adjusts.t -= (offset - rad);
  73                         adjusts.l += 1;
  74                         adjusts.w -= (offset + rad + 1);
  75                         adjusts.h -= (offset + rad);
  76                         adjusts.h += 1;
  77                     }
  78                     break;
  79                 }
  80         }
  81         this.adjusts = adjusts;
  82     },
  83
  84 <span id='Ext-Shadow-cfg-mode'>    /**
  85 </span>     * @cfg {String} mode
  86      * The shadow display mode.  Supports the following options:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
  87      * &lt;li&gt;&lt;b&gt;&lt;tt&gt;sides&lt;/tt&gt;&lt;/b&gt; : Shadow displays on both sides and bottom only&lt;/li&gt;
  88      * &lt;li&gt;&lt;b&gt;&lt;tt&gt;frame&lt;/tt&gt;&lt;/b&gt; : Shadow displays equally on all four sides&lt;/li&gt;
  89      * &lt;li&gt;&lt;b&gt;&lt;tt&gt;drop&lt;/tt&gt;&lt;/b&gt; : Traditional bottom-right drop shadow&lt;/li&gt;
  90      * &lt;/ul&gt;&lt;/div&gt;
  91      */
  92 <span id='Ext-Shadow-cfg-offset'>    /**
  93 </span>     * @cfg {String} offset
  94      * The number of pixels to offset the shadow from the element (defaults to &lt;tt&gt;4&lt;/tt&gt;)
  95      */
  96     offset: 4,
  97
  98     // private
  99     defaultMode: &quot;drop&quot;,
 100
 101 <span id='Ext-Shadow-method-show'>    /**
 102 </span>     * Displays the shadow under the target element
 103      * @param {Mixed} targetEl The id or element under which the shadow should display
 104      */
 105     show: function(target) {
 106         target = Ext.get(target);
 107         if (!this.el) {
 108             this.el = Ext.ShadowPool.pull();
 109             if (this.el.dom.nextSibling != target.dom) {
 110                 this.el.insertBefore(target);
 111             }
 112         }
 113         this.el.setStyle(&quot;z-index&quot;, this.zIndex || parseInt(target.getStyle(&quot;z-index&quot;), 10) - 1);
 114         if (Ext.isIE &amp;&amp; !Ext.supports.CSS3BoxShadow) {
 115             this.el.dom.style.filter = &quot;progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius=&quot; + (this.offset) + &quot;)&quot;;
 116         }
 117         this.realign(
 118             target.getLeft(true),
 119             target.getTop(true),
 120             target.getWidth(),
 121             target.getHeight()
 122         );
 123         this.el.dom.style.display = &quot;block&quot;;
 124     },
 125
 126 <span id='Ext-Shadow-method-isVisible'>    /**
 127 </span>     * Returns true if the shadow is visible, else false
 128      */
 129     isVisible: function() {
 130         return this.el ? true: false;
 131     },
 132
 133 <span id='Ext-Shadow-method-realign'>    /**
 134 </span>     * Direct alignment when values are already available. Show must be called at least once before
 135      * calling this method to ensure it is initialized.
 136      * @param {Number} left The target element left position
 137      * @param {Number} top The target element top position
 138      * @param {Number} width The target element width
 139      * @param {Number} height The target element height
 140      */
 141     realign: function(l, t, targetWidth, targetHeight) {
 142         if (!this.el) {
 143             return;
 144         }
 145         var adjusts = this.adjusts,
 146             d = this.el.dom,
 147             targetStyle = d.style,
 148             shadowWidth,
 149             shadowHeight,
 150             cn,
 151             sww,
 152             sws,
 153             shs;
 154
 155         targetStyle.left = (l + adjusts.l) + &quot;px&quot;;
 156         targetStyle.top = (t + adjusts.t) + &quot;px&quot;;
 157         shadowWidth = Math.max(targetWidth + adjusts.w, 0);
 158         shadowHeight = Math.max(targetHeight + adjusts.h, 0);
 159         sws = shadowWidth + &quot;px&quot;;
 160         shs = shadowHeight + &quot;px&quot;;
 161         if (targetStyle.width != sws || targetStyle.height != shs) {
 162             targetStyle.width = sws;
 163             targetStyle.height = shs;
 164             if (Ext.supports.CSS3BoxShadow) {
 165                 targetStyle.boxShadow = '0 0 ' + this.offset + 'px 0 #888';
 166             } else {
 167
 168                 // Adjust the 9 point framed element to poke out on the required sides
 169                 if (!Ext.isIE) {
 170                     cn = d.childNodes;
 171                     sww = Math.max(0, (shadowWidth - 12)) + &quot;px&quot;;
 172                     cn[0].childNodes[1].style.width = sww;
 173                     cn[1].childNodes[1].style.width = sww;
 174                     cn[2].childNodes[1].style.width = sww;
 175                     cn[1].style.height = Math.max(0, (shadowHeight - 12)) + &quot;px&quot;;
 176                 }
 177             }
 178         }
 179     },
 180
 181 <span id='Ext-Shadow-method-hide'>    /**
 182 </span>     * Hides this shadow
 183      */
 184     hide: function() {
 185         if (this.el) {
 186             this.el.dom.style.display = &quot;none&quot;;
 187             Ext.ShadowPool.push(this.el);
 188             delete this.el;
 189         }
 190     },
 191
 192 <span id='Ext-Shadow-method-setZIndex'>    /**
 193 </span>     * Adjust the z-index of this shadow
 194      * @param {Number} zindex The new z-index
 195      */
 196     setZIndex: function(z) {
 197         this.zIndex = z;
 198         if (this.el) {
 199             this.el.setStyle(&quot;z-index&quot;, z);
 200         }
 201     }
 202 });</pre></pre></body></html>