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