X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..6746dc89c47ed01b165cc1152533605f97eb8e8d:/docs/source/Shadow.html diff --git a/docs/source/Shadow.html b/docs/source/Shadow.html index c62ad42e..54a726d2 100644 --- a/docs/source/Shadow.html +++ b/docs/source/Shadow.html @@ -1,213 +1,222 @@ + - + The source code - - + + + + - - 
/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-
/**
- * @class Ext.Shadow
+
+  
/**
+ * @class Ext.Shadow
  * Simple class that can provide a shadow effect for any element.  Note that the element MUST be absolutely positioned,
  * and the shadow does not provide any shimming.  This should be used only in simple cases -- for more advanced
  * functionality that can also provide the same shadow effect, see the {@link Ext.Layer} class.
- * @constructor
- * Create a new Shadow
- * @param {Object} config The config object
  */
-Ext.Shadow = function(config) {
-    Ext.apply(this, config);
-    if (typeof this.mode != "string") {
-        this.mode = this.defaultMode;
-    }
-    var o = this.offset,
-        a = {
-            h: 0
-        },
-        rad = Math.floor(this.offset / 2);
-    switch (this.mode.toLowerCase()) {
-        // all this hideous nonsense calculates the various offsets for shadows
-        case "drop":
-            a.w = 0;
-            a.l = a.t = o;
-            a.t -= 1;
-            if (Ext.isIE) {
-                a.l -= this.offset + rad;
-                a.t -= this.offset + rad;
-                a.w -= rad;
-                a.h -= rad;
-                a.t += 1;
-            }
-        break;
-        case "sides":
-            a.w = (o * 2);
-            a.l = -o;
-            a.t = o - 1;
-            if (Ext.isIE) {
-                a.l -= (this.offset - rad);
-                a.t -= this.offset + rad;
-                a.l += 1;
-                a.w -= (this.offset - rad) * 2;
-                a.w -= rad + 1;
-                a.h -= 1;
-            }
-        break;
-        case "frame":
-            a.w = a.h = (o * 2);
-            a.l = a.t = -o;
-            a.t += 1;
-            a.h -= 2;
-            if (Ext.isIE) {
-                a.l -= (this.offset - rad);
-                a.t -= (this.offset - rad);
-                a.l += 1;
-                a.w -= (this.offset + rad + 1);
-                a.h -= (this.offset + rad);
-                a.h += 1;
-            }
-        break;
-    };
+Ext.define('Ext.Shadow', {
+    requires: ['Ext.ShadowPool'],
 
-    this.adjusts = a;
-};
+    /**
+     * Creates new Shadow.
+     * @param {Object} config (optional) Config object.
+     */
+    constructor: function(config) {
+        Ext.apply(this, config);
+        if (typeof this.mode != "string") {
+            this.mode = this.defaultMode;
+        }
+        var offset = this.offset,
+            adjusts = {
+                h: 0
+            },
+            rad = Math.floor(this.offset / 2);
 
-Ext.Shadow.prototype = {
-    
/**
-     * @cfg {String} mode
-     * The shadow display mode.  Supports the following options:
    
-     * 
  • sides : Shadow displays on both sides and bottom only
    • 
-     * 
  • frame : Shadow displays equally on all four sides
    • 
-     * 
  • drop : Traditional bottom-right drop shadow
    • 
-     * 

+        switch (this.mode.toLowerCase()) {
+            // all this hideous nonsense calculates the various offsets for shadows
+            case "drop":
+                if (Ext.supports.CSS3BoxShadow) {
+                    adjusts.w = adjusts.h = -offset;
+                    adjusts.l = adjusts.t = offset;
+                } else {
+                    adjusts.w = 0;
+                    adjusts.l = adjusts.t = offset;
+                    adjusts.t -= 1;
+                    if (Ext.isIE) {
+                        adjusts.l -= offset + rad;
+                        adjusts.t -= offset + rad;
+                        adjusts.w -= rad;
+                        adjusts.h -= rad;
+                        adjusts.t += 1;
+                    }
+                }
+                break;
+            case "sides":
+                if (Ext.supports.CSS3BoxShadow) {
+                    adjusts.h -= offset;
+                    adjusts.t = offset;
+                    adjusts.l = adjusts.w = 0;
+                } else {
+                    adjusts.w = (offset * 2);
+                    adjusts.l = -offset;
+                    adjusts.t = offset - 1;
+                    if (Ext.isIE) {
+                        adjusts.l -= (offset - rad);
+                        adjusts.t -= offset + rad;
+                        adjusts.l += 1;
+                        adjusts.w -= (offset - rad) * 2;
+                        adjusts.w -= rad + 1;
+                        adjusts.h -= 1;
+                    }
+                }
+                break;
+            case "frame":
+                if (Ext.supports.CSS3BoxShadow) {
+                    adjusts.l = adjusts.w = adjusts.t = 0;
+                } else {
+                    adjusts.w = adjusts.h = (offset * 2);
+                    adjusts.l = adjusts.t = -offset;
+                    adjusts.t += 1;
+                    adjusts.h -= 2;
+                    if (Ext.isIE) {
+                        adjusts.l -= (offset - rad);
+                        adjusts.t -= (offset - rad);
+                        adjusts.l += 1;
+                        adjusts.w -= (offset + rad + 1);
+                        adjusts.h -= (offset + rad);
+                        adjusts.h += 1;
+                    }
+                    break;
+                }
+        }
+        this.adjusts = adjusts;
+    },
+
+    /**
+     * @cfg {String} mode
+     * The shadow display mode.  Supports the following options:<div class="mdetail-params"><ul>
+     * <li><b><tt>sides</tt></b> : Shadow displays on both sides and bottom only</li>
+     * <li><b><tt>frame</tt></b> : Shadow displays equally on all four sides</li>
+     * <li><b><tt>drop</tt></b> : Traditional bottom-right drop shadow</li>
+     * </ul></div>
      */
-    
/**
-     * @cfg {String} offset
-     * The number of pixels to offset the shadow from the element (defaults to 4)
+    /**
+     * @cfg {String} offset
+     * The number of pixels to offset the shadow from the element (defaults to <tt>4</tt>)
      */
     offset: 4,
 
     // private
-    defaultMode: "drop",
+    defaultMode: "drop",
 
-    
/**
-     * Displays the shadow under the target element
+    /**
+     * Displays the shadow under the target element
      * @param {Mixed} targetEl The id or element under which the shadow should display
      */
     show: function(target) {
         target = Ext.get(target);
         if (!this.el) {
-            this.el = Ext.Shadow.Pool.pull();
+            this.el = Ext.ShadowPool.pull();
             if (this.el.dom.nextSibling != target.dom) {
                 this.el.insertBefore(target);
             }
         }
-        this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10) - 1);
-        if (Ext.isIE) {
-            this.el.dom.style.filter = "progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius=" + (this.offset) + ")";
+        this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10) - 1);
+        if (Ext.isIE && !Ext.supports.CSS3BoxShadow) {
+            this.el.dom.style.filter = "progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius=" + (this.offset) + ")";
         }
         this.realign(
-        target.getLeft(true),
-        target.getTop(true),
-        target.getWidth(),
-        target.getHeight()
+            target.getLeft(true),
+            target.getTop(true),
+            target.getWidth(),
+            target.getHeight()
         );
-        this.el.dom.style.display = "block";
+        this.el.dom.style.display = "block";
     },
 
-    
/**
-     * Returns true if the shadow is visible, else false
+    /**
+     * Returns true if the shadow is visible, else false
      */
     isVisible: function() {
         return this.el ? true: false;
     },
 
-    
/**
-     * Direct alignment when values are already available. Show must be called at least once before
+    /**
+     * Direct alignment when values are already available. Show must be called at least once before
      * calling this method to ensure it is initialized.
      * @param {Number} left The target element left position
      * @param {Number} top The target element top position
      * @param {Number} width The target element width
      * @param {Number} height The target element height
      */
-    realign: function(l, t, w, h) {
+    realign: function(l, t, targetWidth, targetHeight) {
         if (!this.el) {
             return;
         }
-        var a = this.adjusts,
+        var adjusts = this.adjusts,
             d = this.el.dom,
-            s = d.style,
-            iea = 0,
-            sw = (w + a.w),
-            sh = (h + a.h),
-            sws = sw + "px",
-            shs = sh + "px",
+            targetStyle = d.style,
+            shadowWidth,
+            shadowHeight,
             cn,
-            sww;
-        s.left = (l + a.l) + "px";
-        s.top = (t + a.t) + "px";
-        if (s.width != sws || s.height != shs) {
-            s.width = sws;
-            s.height = shs;
-            if (!Ext.isIE) {
-                cn = d.childNodes;
-                sww = Math.max(0, (sw - 12)) + "px";
-                cn[0].childNodes[1].style.width = sww;
-                cn[1].childNodes[1].style.width = sww;
-                cn[2].childNodes[1].style.width = sww;
-                cn[1].style.height = Math.max(0, (sh - 12)) + "px";
+            sww, 
+            sws, 
+            shs;
+
+        targetStyle.left = (l + adjusts.l) + "px";
+        targetStyle.top = (t + adjusts.t) + "px";
+        shadowWidth = Math.max(targetWidth + adjusts.w, 0);
+        shadowHeight = Math.max(targetHeight + adjusts.h, 0);
+        sws = shadowWidth + "px";
+        shs = shadowHeight + "px";
+        if (targetStyle.width != sws || targetStyle.height != shs) {
+            targetStyle.width = sws;
+            targetStyle.height = shs;
+            if (Ext.supports.CSS3BoxShadow) {
+                targetStyle.boxShadow = '0 0 ' + this.offset + 'px 0 #888';
+            } else {
+
+                // Adjust the 9 point framed element to poke out on the required sides
+                if (!Ext.isIE) {
+                    cn = d.childNodes;
+                    sww = Math.max(0, (shadowWidth - 12)) + "px";
+                    cn[0].childNodes[1].style.width = sww;
+                    cn[1].childNodes[1].style.width = sww;
+                    cn[2].childNodes[1].style.width = sww;
+                    cn[1].style.height = Math.max(0, (shadowHeight - 12)) + "px";
+                }
             }
         }
     },
 
-    
/**
-     * Hides this shadow
+    /**
+     * Hides this shadow
      */
     hide: function() {
         if (this.el) {
-            this.el.dom.style.display = "none";
-            Ext.Shadow.Pool.push(this.el);
+            this.el.dom.style.display = "none";
+            Ext.ShadowPool.push(this.el);
             delete this.el;
         }
     },
 
-    
/**
-     * Adjust the z-index of this shadow
+    /**
+     * Adjust the z-index of this shadow
      * @param {Number} zindex The new z-index
      */
     setZIndex: function(z) {
         this.zIndex = z;
         if (this.el) {
-            this.el.setStyle("z-index", z);
+            this.el.setStyle("z-index", z);
         }
     }
-};
-
-// Private utility class that manages the internal Shadow cache
-Ext.Shadow.Pool = function() {
-    var p = [],
-        markup = Ext.isIE ?
-            '
':
-            '
';
-    return {
-        pull: function() {
-            var sh = p.shift();
-            if (!sh) {
-                sh = Ext.get(Ext.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
-                sh.autoBoxAdjust = false;
-            }
-            return sh;
-        },
-
-        push: function(sh) {
-            p.push(sh);
-        }
-    };
-}();
    
+});
- \ No newline at end of file +