docs/source/Shadow.html

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