Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / 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>