Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Shadow.html
index 2d4b173..b36884e 100644 (file)
@@ -1,27 +1,49 @@
-<!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'>/**
-</span></span> * @class Ext.Shadow
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-Shadow'>/**
+</span> * @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.define('Ext.Shadow', {
     requires: ['Ext.ShadowPool'],
 
+<span id='Ext-Shadow-method-constructor'>    /**
+</span>     * Creates new Shadow.
+     * @param {Object} config (optional) Config object.
+     */
     constructor: function(config) {
-        Ext.apply(this, config);
-        if (typeof this.mode != &quot;string&quot;) {
-            this.mode = this.defaultMode;
-        }
-        var offset = this.offset,
+        var me = this,
             adjusts = {
                 h: 0
             },
-            rad = Math.floor(this.offset / 2);
-
-        switch (this.mode.toLowerCase()) {
+            offset,
+            rad;
+        
+        Ext.apply(me, config);
+        if (!Ext.isString(me.mode)) {
+            me.mode = me.defaultMode;
+        }
+        offset = me.offset;
+        rad = Math.floor(offset / 2);
+        me.opacity = 50;
+        switch (me.mode.toLowerCase()) {
             // all this hideous nonsense calculates the various offsets for shadows
             case &quot;drop&quot;:
                 if (Ext.supports.CSS3BoxShadow) {
@@ -78,7 +100,7 @@ Ext.define('Ext.Shadow', {
                     break;
                 }
         }
-        this.adjusts = adjusts;
+        me.adjusts = adjusts;
     },
 
 <span id='Ext-Shadow-cfg-mode'>    /**
@@ -90,8 +112,8 @@ Ext.define('Ext.Shadow', {
      * &lt;/ul&gt;&lt;/div&gt;
      */
 <span id='Ext-Shadow-cfg-offset'>    /**
-</span>     * @cfg {String} offset
-     * The number of pixels to offset the shadow from the element (defaults to &lt;tt&gt;4&lt;/tt&gt;)
+</span>     * @cfg {Number} offset
+     * The number of pixels to offset the shadow from the element
      */
     offset: 4,
 
@@ -100,27 +122,31 @@ Ext.define('Ext.Shadow', {
 
 <span id='Ext-Shadow-method-show'>    /**
 </span>     * Displays the shadow under the target element
-     * @param {Mixed} targetEl The id or element under which the shadow should display
+     * @param {String/HTMLElement/Ext.Element} targetEl The id or element under which the shadow should display
      */
     show: function(target) {
+        var me = this,
+            index;
+        
         target = Ext.get(target);
-        if (!this.el) {
-            this.el = Ext.ShadowPool.pull();
-            if (this.el.dom.nextSibling != target.dom) {
-                this.el.insertBefore(target);
+        if (!me.el) {
+            me.el = Ext.ShadowPool.pull();
+            if (me.el.dom.nextSibling != target.dom) {
+                me.el.insertBefore(target);
             }
         }
-        this.el.setStyle(&quot;z-index&quot;, this.zIndex || parseInt(target.getStyle(&quot;z-index&quot;), 10) - 1);
+        index = (parseInt(target.getStyle(&quot;z-index&quot;), 10) - 1) || 0;
+        me.el.setStyle(&quot;z-index&quot;, me.zIndex || index);
         if (Ext.isIE &amp;&amp; !Ext.supports.CSS3BoxShadow) {
-            this.el.dom.style.filter = &quot;progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius=&quot; + (this.offset) + &quot;)&quot;;
+            me.el.dom.style.filter = &quot;progid:DXImageTransform.Microsoft.alpha(opacity=&quot; + me.opacity + &quot;) progid:DXImageTransform.Microsoft.Blur(pixelradius=&quot; + (me.offset) + &quot;)&quot;;
         }
-        this.realign(
+        me.realign(
             target.getLeft(true),
             target.getTop(true),
-            target.getWidth(),
-            target.getHeight()
+            target.dom.offsetWidth,
+            target.dom.offsetHeight
         );
-        this.el.dom.style.display = &quot;block&quot;;
+        me.el.dom.style.display = &quot;block&quot;;
     },
 
 <span id='Ext-Shadow-method-isVisible'>    /**
@@ -182,10 +208,12 @@ Ext.define('Ext.Shadow', {
 </span>     * Hides this shadow
      */
     hide: function() {
-        if (this.el) {
-            this.el.dom.style.display = &quot;none&quot;;
-            Ext.ShadowPool.push(this.el);
-            delete this.el;
+        var me = this;
+        
+        if (me.el) {
+            me.el.dom.style.display = &quot;none&quot;;
+            Ext.ShadowPool.push(me.el);
+            delete me.el;
         }
     },
 
@@ -198,5 +226,21 @@ Ext.define('Ext.Shadow', {
         if (this.el) {
             this.el.setStyle(&quot;z-index&quot;, z);
         }
+    },
+    
+<span id='Ext-Shadow-method-setOpacity'>    /**
+</span>     * Sets the opacity of the shadow
+     * @param {Number} opacity The opacity
+     */
+    setOpacity: function(opacity){
+        if (this.el) {
+            if (Ext.isIE &amp;&amp; !Ext.supports.CSS3BoxShadow) {
+                opacity = Math.floor(opacity * 100 / 2) / 100;
+            }
+            this.opacity = opacity;
+            this.el.setOpacity(opacity);
+        }
     }
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>