docs/source/Layer.html

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