docs/source/Shadow.html

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