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