docs/source/Shadow.html

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