docs/source/Layer.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   8     <pre class="prettyprint lang-js">/*!
   9  * Ext JS Library 3.0.3
  10  * Copyright(c) 2006-2009 Ext JS, LLC
  11  * licensing@extjs.com
  12  * http://www.extjs.com/license
  13  */
  14 <div id="cls-Ext.Layer"></div>/**
  15  * @class Ext.Layer
  16  * @extends Ext.Element
  17  * An extended {@link Ext.Element} object that supports a shadow and shim, constrain to viewport and
  18  * automatic maintaining of shadow/shim positions.
  19  * @cfg {Boolean} shim False to disable the iframe shim in browsers which need one (defaults to true)
  20  * @cfg {String/Boolean} shadow True to automatically create an {@link Ext.Shadow}, or a string indicating the
  21  * shadow's display {@link Ext.Shadow#mode}. False to disable the shadow. (defaults to false)
  22  * @cfg {Object} dh DomHelper object config to create element with (defaults to {tag: 'div', cls: 'x-layer'}).
  23  * @cfg {Boolean} constrain False to disable constrain to viewport (defaults to true)
  24  * @cfg {String} cls CSS class to add to the element
  25  * @cfg {Number} zindex Starting z-index (defaults to 11000)
  26  * @cfg {Number} shadowOffset Number of pixels to offset the shadow (defaults to 4)
  27  * @cfg {Boolean} useDisplay
  28  * Defaults to use css offsets to hide the Layer. Specify <tt>true</tt>
  29  * to use css style <tt>'display:none;'</tt> to hide the Layer.
  30  * @constructor
  31  * @param {Object} config An object with config options.
  32  * @param {String/HTMLElement} existingEl (optional) Uses an existing DOM element. If the element is not found it creates it.
  33  */
  34 (function(){
  35 Ext.Layer = function(config, existingEl){
  36     config = config || {};
  37     var dh = Ext.DomHelper;
  38     var cp = config.parentEl, pel = cp ? Ext.getDom(cp) : document.body;
  39     if(existingEl){
  40         this.dom = Ext.getDom(existingEl);
  41     }
  42     if(!this.dom){
  43         var o = config.dh || {tag: 'div', cls: 'x-layer'};
  44         this.dom = dh.append(pel, o);
  45     }
  46     if(config.cls){
  47         this.addClass(config.cls);
  48     }
  49     this.constrain = config.constrain !== false;
  50     this.setVisibilityMode(Ext.Element.VISIBILITY);
  51     if(config.id){
  52         this.id = this.dom.id = config.id;
  53     }else{
  54         this.id = Ext.id(this.dom);
  55     }
  56     this.zindex = config.zindex || this.getZIndex();
  57     this.position('absolute', this.zindex);
  58     if(config.shadow){
  59         this.shadowOffset = config.shadowOffset || 4;
  60         this.shadow = new Ext.Shadow({
  61             offset : this.shadowOffset,
  62             mode : config.shadow
  63         });
  64     }else{
  65         this.shadowOffset = 0;
  66     }
  67     this.useShim = config.shim !== false && Ext.useShims;
  68     this.useDisplay = config.useDisplay;
  69     this.hide();
  70 };
  71
  72 var supr = Ext.Element.prototype;
  73
  74 // shims are shared among layer to keep from having 100 iframes
  75 var shims = [];
  76
  77 Ext.extend(Ext.Layer, Ext.Element, {
  78
  79     getZIndex : function(){
  80         return this.zindex || parseInt((this.getShim() || this).getStyle('z-index'), 10) || 11000;
  81     },
  82
  83     getShim : function(){
  84         if(!this.useShim){
  85             return null;
  86         }
  87         if(this.shim){
  88             return this.shim;
  89         }
  90         var shim = shims.shift();
  91         if(!shim){
  92             shim = this.createShim();
  93             shim.enableDisplayMode('block');
  94             shim.dom.style.display = 'none';
  95             shim.dom.style.visibility = 'visible';
  96         }
  97         var pn = this.dom.parentNode;
  98         if(shim.dom.parentNode != pn){
  99             pn.insertBefore(shim.dom, this.dom);
 100         }
 101         shim.setStyle('z-index', this.getZIndex()-2);
 102         this.shim = shim;
 103         return shim;
 104     },
 105
 106     hideShim : function(){
 107         if(this.shim){
 108             this.shim.setDisplayed(false);
 109             shims.push(this.shim);
 110             delete this.shim;
 111         }
 112     },
 113
 114     disableShadow : function(){
 115         if(this.shadow){
 116             this.shadowDisabled = true;
 117             this.shadow.hide();
 118             this.lastShadowOffset = this.shadowOffset;
 119             this.shadowOffset = 0;
 120         }
 121     },
 122
 123     enableShadow : function(show){
 124         if(this.shadow){
 125             this.shadowDisabled = false;
 126             this.shadowOffset = this.lastShadowOffset;
 127             delete this.lastShadowOffset;
 128             if(show){
 129                 this.sync(true);
 130             }
 131         }
 132     },
 133
 134     // private
 135     // this code can execute repeatedly in milliseconds (i.e. during a drag) so
 136     // code size was sacrificed for effeciency (e.g. no getBox/setBox, no XY calls)
 137     sync : function(doShow){
 138         var sw = this.shadow;
 139         if(!this.updating && this.isVisible() && (sw || this.useShim)){
 140             var sh = this.getShim();
 141
 142             var w = this.getWidth(),
 143                 h = this.getHeight();
 144
 145             var l = this.getLeft(true),
 146                 t = this.getTop(true);
 147
 148             if(sw && !this.shadowDisabled){
 149                 if(doShow && !sw.isVisible()){
 150                     sw.show(this);
 151                 }else{
 152                     sw.realign(l, t, w, h);
 153                 }
 154                 if(sh){
 155                     if(doShow){
 156                        sh.show();
 157                     }
 158                     // fit the shim behind the shadow, so it is shimmed too
 159                     var a = sw.adjusts, s = sh.dom.style;
 160                     s.left = (Math.min(l, l+a.l))+'px';
 161                     s.top = (Math.min(t, t+a.t))+'px';
 162                     s.width = (w+a.w)+'px';
 163                     s.height = (h+a.h)+'px';
 164                 }
 165             }else if(sh){
 166                 if(doShow){
 167                    sh.show();
 168                 }
 169                 sh.setSize(w, h);
 170                 sh.setLeftTop(l, t);
 171             }
 172
 173         }
 174     },
 175
 176     // private
 177     destroy : function(){
 178         this.hideShim();
 179         if(this.shadow){
 180             this.shadow.hide();
 181         }
 182         this.removeAllListeners();
 183         Ext.removeNode(this.dom);
 184         Ext.Element.uncache(this.id);
 185     },
 186
 187     remove : function(){
 188         this.destroy();
 189     },
 190
 191     // private
 192     beginUpdate : function(){
 193         this.updating = true;
 194     },
 195
 196     // private
 197     endUpdate : function(){
 198         this.updating = false;
 199         this.sync(true);
 200     },
 201
 202     // private
 203     hideUnders : function(negOffset){
 204         if(this.shadow){
 205             this.shadow.hide();
 206         }
 207         this.hideShim();
 208     },
 209
 210     // private
 211     constrainXY : function(){
 212         if(this.constrain){
 213             var vw = Ext.lib.Dom.getViewWidth(),
 214                 vh = Ext.lib.Dom.getViewHeight();
 215             var s = Ext.getDoc().getScroll();
 216
 217             var xy = this.getXY();
 218             var x = xy[0], y = xy[1];
 219             var so = this.shadowOffset;
 220             var w = this.dom.offsetWidth+so, h = this.dom.offsetHeight+so;
 221             // only move it if it needs it
 222             var moved = false;
 223             // first validate right/bottom
 224             if((x + w) > vw+s.left){
 225                 x = vw - w - so;
 226                 moved = true;
 227             }
 228             if((y + h) > vh+s.top){
 229                 y = vh - h - so;
 230                 moved = true;
 231             }
 232             // then make sure top/left isn't negative
 233             if(x < s.left){
 234                 x = s.left;
 235                 moved = true;
 236             }
 237             if(y < s.top){
 238                 y = s.top;
 239                 moved = true;
 240             }
 241             if(moved){
 242                 if(this.avoidY){
 243                     var ay = this.avoidY;
 244                     if(y <= ay && (y+h) >= ay){
 245                         y = ay-h-5;
 246                     }
 247                 }
 248                 xy = [x, y];
 249                 this.storeXY(xy);
 250                 supr.setXY.call(this, xy);
 251                 this.sync();
 252             }
 253         }
 254         return this;
 255     },
 256
 257     isVisible : function(){
 258         return this.visible;
 259     },
 260
 261     // private
 262     showAction : function(){
 263         this.visible = true; // track visibility to prevent getStyle calls
 264         if(this.useDisplay === true){
 265             this.setDisplayed('');
 266         }else if(this.lastXY){
 267             supr.setXY.call(this, this.lastXY);
 268         }else if(this.lastLT){
 269             supr.setLeftTop.call(this, this.lastLT[0], this.lastLT[1]);
 270         }
 271     },
 272
 273     // private
 274     hideAction : function(){
 275         this.visible = false;
 276         if(this.useDisplay === true){
 277             this.setDisplayed(false);
 278         }else{
 279             this.setLeftTop(-10000,-10000);
 280         }
 281     },
 282
 283     // overridden Element method
 284     setVisible : function(v, a, d, c, e){
 285         if(v){
 286             this.showAction();
 287         }
 288         if(a && v){
 289             var cb = function(){
 290                 this.sync(true);
 291                 if(c){
 292                     c();
 293                 }
 294             }.createDelegate(this);
 295             supr.setVisible.call(this, true, true, d, cb, e);
 296         }else{
 297             if(!v){
 298                 this.hideUnders(true);
 299             }
 300             var cb = c;
 301             if(a){
 302                 cb = function(){
 303                     this.hideAction();
 304                     if(c){
 305                         c();
 306                     }
 307                 }.createDelegate(this);
 308             }
 309             supr.setVisible.call(this, v, a, d, cb, e);
 310             if(v){
 311                 this.sync(true);
 312             }else if(!a){
 313                 this.hideAction();
 314             }
 315         }
 316         return this;
 317     },
 318
 319     storeXY : function(xy){
 320         delete this.lastLT;
 321         this.lastXY = xy;
 322     },
 323
 324     storeLeftTop : function(left, top){
 325         delete this.lastXY;
 326         this.lastLT = [left, top];
 327     },
 328
 329     // private
 330     beforeFx : function(){
 331         this.beforeAction();
 332         return Ext.Layer.superclass.beforeFx.apply(this, arguments);
 333     },
 334
 335     // private
 336     afterFx : function(){
 337         Ext.Layer.superclass.afterFx.apply(this, arguments);
 338         this.sync(this.isVisible());
 339     },
 340
 341     // private
 342     beforeAction : function(){
 343         if(!this.updating && this.shadow){
 344             this.shadow.hide();
 345         }
 346     },
 347
 348     // overridden Element method
 349     setLeft : function(left){
 350         this.storeLeftTop(left, this.getTop(true));
 351         supr.setLeft.apply(this, arguments);
 352         this.sync();
 353         return this;
 354     },
 355
 356     setTop : function(top){
 357         this.storeLeftTop(this.getLeft(true), top);
 358         supr.setTop.apply(this, arguments);
 359         this.sync();
 360         return this;
 361     },
 362
 363     setLeftTop : function(left, top){
 364         this.storeLeftTop(left, top);
 365         supr.setLeftTop.apply(this, arguments);
 366         this.sync();
 367         return this;
 368     },
 369
 370     setXY : function(xy, a, d, c, e){
 371         this.fixDisplay();
 372         this.beforeAction();
 373         this.storeXY(xy);
 374         var cb = this.createCB(c);
 375         supr.setXY.call(this, xy, a, d, cb, e);
 376         if(!a){
 377             cb();
 378         }
 379         return this;
 380     },
 381
 382     // private
 383     createCB : function(c){
 384         var el = this;
 385         return function(){
 386             el.constrainXY();
 387             el.sync(true);
 388             if(c){
 389                 c();
 390             }
 391         };
 392     },
 393
 394     // overridden Element method
 395     setX : function(x, a, d, c, e){
 396         this.setXY([x, this.getY()], a, d, c, e);
 397         return this;
 398     },
 399
 400     // overridden Element method
 401     setY : function(y, a, d, c, e){
 402         this.setXY([this.getX(), y], a, d, c, e);
 403         return this;
 404     },
 405
 406     // overridden Element method
 407     setSize : function(w, h, a, d, c, e){
 408         this.beforeAction();
 409         var cb = this.createCB(c);
 410         supr.setSize.call(this, w, h, a, d, cb, e);
 411         if(!a){
 412             cb();
 413         }
 414         return this;
 415     },
 416
 417     // overridden Element method
 418     setWidth : function(w, a, d, c, e){
 419         this.beforeAction();
 420         var cb = this.createCB(c);
 421         supr.setWidth.call(this, w, a, d, cb, e);
 422         if(!a){
 423             cb();
 424         }
 425         return this;
 426     },
 427
 428     // overridden Element method
 429     setHeight : function(h, a, d, c, e){
 430         this.beforeAction();
 431         var cb = this.createCB(c);
 432         supr.setHeight.call(this, h, a, d, cb, e);
 433         if(!a){
 434             cb();
 435         }
 436         return this;
 437     },
 438
 439     // overridden Element method
 440     setBounds : function(x, y, w, h, a, d, c, e){
 441         this.beforeAction();
 442         var cb = this.createCB(c);
 443         if(!a){
 444             this.storeXY([x, y]);
 445             supr.setXY.call(this, [x, y]);
 446             supr.setSize.call(this, w, h, a, d, cb, e);
 447             cb();
 448         }else{
 449             supr.setBounds.call(this, x, y, w, h, a, d, cb, e);
 450         }
 451         return this;
 452     },
 453
 454     /**
 455      * Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
 456      * incremented by two more than the value passed in so that it always shows above any shadow or shim (the shadow
 457      * element, if any, will be assigned z-index + 1, and the shim element, if any, will be assigned the unmodified z-index).
 458      * @param {Number} zindex The new z-index to set
 459      * @return {this} The Layer
 460      */
 461     setZIndex : function(zindex){
 462         this.zindex = zindex;
 463         this.setStyle('z-index', zindex + 2);
 464         if(this.shadow){
 465             this.shadow.setZIndex(zindex + 1);
 466         }
 467         if(this.shim){
 468             this.shim.setStyle('z-index', zindex);
 469         }
 470         return this;
 471     }
 472 });
 473 })();</pre>
 474 </body>
 475 </html>