485 lines
14 KiB
HTML
485 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>The source code</title>
|
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
|
<style type="text/css">
|
|
.highlight { display: block; background-color: #ddd; }
|
|
</style>
|
|
<script type="text/javascript">
|
|
function highlight() {
|
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="prettyPrint(); highlight();">
|
|
<pre class="prettyprint lang-js"><span id='Ext-Layer-method-constructor'><span id='Ext-Layer-cfg-useDisplay'><span id='Ext-Layer-cfg-shadowOffset'><span id='Ext-Layer-cfg-zindex'><span id='Ext-Layer-cfg-cls'><span id='Ext-Layer-cfg-constrain'><span id='Ext-Layer-cfg-dh'><span id='Ext-Layer-cfg-shadow'><span id='Ext-Layer-cfg-shim'><span id='Ext-Layer'>/**
|
|
</span></span></span></span></span></span></span></span></span></span> * @class Ext.Layer
|
|
* @extends Ext.Element
|
|
* An extended {@link Ext.Element} object that supports a shadow and shim, constrain to viewport and
|
|
* automatic maintaining of shadow/shim positions.
|
|
* @cfg {Boolean} shim False to disable the iframe shim in browsers which need one (defaults to true)
|
|
* @cfg {String/Boolean} shadow True to automatically create an {@link Ext.Shadow}, or a string indicating the
|
|
* shadow's display {@link Ext.Shadow#mode}. False to disable the shadow. (defaults to false)
|
|
* @cfg {Object} dh DomHelper object config to create element with (defaults to {tag: 'div', cls: 'x-layer'}).
|
|
* @cfg {Boolean} constrain False to disable constrain to viewport (defaults to true)
|
|
* @cfg {String} cls CSS class to add to the element
|
|
* @cfg {Number} zindex Starting z-index (defaults to 11000)
|
|
* @cfg {Number} shadowOffset Number of pixels to offset the shadow (defaults to 4)
|
|
* @cfg {Boolean} useDisplay
|
|
* Defaults to use css offsets to hide the Layer. Specify <tt>true</tt>
|
|
* to use css style <tt>'display:none;'</tt> to hide the Layer.
|
|
* @constructor
|
|
* @param {Object} config An object with config options.
|
|
* @param {String/HTMLElement} existingEl (optional) Uses an existing DOM element. If the element is not found it creates it.
|
|
*/
|
|
(function(){
|
|
Ext.Layer = function(config, existingEl){
|
|
config = config || {};
|
|
var dh = Ext.DomHelper,
|
|
cp = config.parentEl, pel = cp ? Ext.getDom(cp) : document.body;
|
|
|
|
if (existingEl) {
|
|
this.dom = Ext.getDom(existingEl);
|
|
}
|
|
if(!this.dom){
|
|
var o = config.dh || {tag: 'div', cls: 'x-layer'};
|
|
this.dom = dh.append(pel, o);
|
|
}
|
|
if(config.cls){
|
|
this.addClass(config.cls);
|
|
}
|
|
this.constrain = config.constrain !== false;
|
|
this.setVisibilityMode(Ext.Element.VISIBILITY);
|
|
if(config.id){
|
|
this.id = this.dom.id = config.id;
|
|
}else{
|
|
this.id = Ext.id(this.dom);
|
|
}
|
|
this.zindex = config.zindex || this.getZIndex();
|
|
this.position('absolute', this.zindex);
|
|
if(config.shadow){
|
|
this.shadowOffset = config.shadowOffset || 4;
|
|
this.shadow = new Ext.Shadow({
|
|
offset : this.shadowOffset,
|
|
mode : config.shadow
|
|
});
|
|
}else{
|
|
this.shadowOffset = 0;
|
|
}
|
|
this.useShim = config.shim !== false && Ext.useShims;
|
|
this.useDisplay = config.useDisplay;
|
|
this.hide();
|
|
};
|
|
|
|
var supr = Ext.Element.prototype;
|
|
|
|
// shims are shared among layer to keep from having 100 iframes
|
|
var shims = [];
|
|
|
|
Ext.extend(Ext.Layer, Ext.Element, {
|
|
|
|
getZIndex : function(){
|
|
return this.zindex || parseInt((this.getShim() || this).getStyle('z-index'), 10) || 11000;
|
|
},
|
|
|
|
getShim : function(){
|
|
if(!this.useShim){
|
|
return null;
|
|
}
|
|
if(this.shim){
|
|
return this.shim;
|
|
}
|
|
var shim = shims.shift();
|
|
if(!shim){
|
|
shim = this.createShim();
|
|
shim.enableDisplayMode('block');
|
|
shim.dom.style.display = 'none';
|
|
shim.dom.style.visibility = 'visible';
|
|
}
|
|
var pn = this.dom.parentNode;
|
|
if(shim.dom.parentNode != pn){
|
|
pn.insertBefore(shim.dom, this.dom);
|
|
}
|
|
shim.setStyle('z-index', this.getZIndex()-2);
|
|
this.shim = shim;
|
|
return shim;
|
|
},
|
|
|
|
hideShim : function(){
|
|
if(this.shim){
|
|
this.shim.setDisplayed(false);
|
|
shims.push(this.shim);
|
|
delete this.shim;
|
|
}
|
|
},
|
|
|
|
disableShadow : function(){
|
|
if(this.shadow){
|
|
this.shadowDisabled = true;
|
|
this.shadow.hide();
|
|
this.lastShadowOffset = this.shadowOffset;
|
|
this.shadowOffset = 0;
|
|
}
|
|
},
|
|
|
|
enableShadow : function(show){
|
|
if(this.shadow){
|
|
this.shadowDisabled = false;
|
|
if(Ext.isDefined(this.lastShadowOffset)) {
|
|
this.shadowOffset = this.lastShadowOffset;
|
|
delete this.lastShadowOffset;
|
|
}
|
|
if(show){
|
|
this.sync(true);
|
|
}
|
|
}
|
|
},
|
|
|
|
// private
|
|
// this code can execute repeatedly in milliseconds (i.e. during a drag) so
|
|
// code size was sacrificed for effeciency (e.g. no getBox/setBox, no XY calls)
|
|
sync : function(doShow){
|
|
var shadow = this.shadow;
|
|
if(!this.updating && this.isVisible() && (shadow || this.useShim)){
|
|
var shim = this.getShim(),
|
|
w = this.getWidth(),
|
|
h = this.getHeight(),
|
|
l = this.getLeft(true),
|
|
t = this.getTop(true);
|
|
|
|
if(shadow && !this.shadowDisabled){
|
|
if(doShow && !shadow.isVisible()){
|
|
shadow.show(this);
|
|
}else{
|
|
shadow.realign(l, t, w, h);
|
|
}
|
|
if(shim){
|
|
if(doShow){
|
|
shim.show();
|
|
}
|
|
// fit the shim behind the shadow, so it is shimmed too
|
|
var shadowAdj = shadow.el.getXY(), shimStyle = shim.dom.style,
|
|
shadowSize = shadow.el.getSize();
|
|
shimStyle.left = (shadowAdj[0])+'px';
|
|
shimStyle.top = (shadowAdj[1])+'px';
|
|
shimStyle.width = (shadowSize.width)+'px';
|
|
shimStyle.height = (shadowSize.height)+'px';
|
|
}
|
|
}else if(shim){
|
|
if(doShow){
|
|
shim.show();
|
|
}
|
|
shim.setSize(w, h);
|
|
shim.setLeftTop(l, t);
|
|
}
|
|
}
|
|
},
|
|
|
|
// private
|
|
destroy : function(){
|
|
this.hideShim();
|
|
if(this.shadow){
|
|
this.shadow.hide();
|
|
}
|
|
this.removeAllListeners();
|
|
Ext.removeNode(this.dom);
|
|
delete this.dom;
|
|
},
|
|
|
|
remove : function(){
|
|
this.destroy();
|
|
},
|
|
|
|
// private
|
|
beginUpdate : function(){
|
|
this.updating = true;
|
|
},
|
|
|
|
// private
|
|
endUpdate : function(){
|
|
this.updating = false;
|
|
this.sync(true);
|
|
},
|
|
|
|
// private
|
|
hideUnders : function(negOffset){
|
|
if(this.shadow){
|
|
this.shadow.hide();
|
|
}
|
|
this.hideShim();
|
|
},
|
|
|
|
// private
|
|
constrainXY : function(){
|
|
if(this.constrain){
|
|
var vw = Ext.lib.Dom.getViewWidth(),
|
|
vh = Ext.lib.Dom.getViewHeight();
|
|
var s = Ext.getDoc().getScroll();
|
|
|
|
var xy = this.getXY();
|
|
var x = xy[0], y = xy[1];
|
|
var so = this.shadowOffset;
|
|
var w = this.dom.offsetWidth+so, h = this.dom.offsetHeight+so;
|
|
// only move it if it needs it
|
|
var moved = false;
|
|
// first validate right/bottom
|
|
if((x + w) > vw+s.left){
|
|
x = vw - w - so;
|
|
moved = true;
|
|
}
|
|
if((y + h) > vh+s.top){
|
|
y = vh - h - so;
|
|
moved = true;
|
|
}
|
|
// then make sure top/left isn't negative
|
|
if(x < s.left){
|
|
x = s.left;
|
|
moved = true;
|
|
}
|
|
if(y < s.top){
|
|
y = s.top;
|
|
moved = true;
|
|
}
|
|
if(moved){
|
|
if(this.avoidY){
|
|
var ay = this.avoidY;
|
|
if(y <= ay && (y+h) >= ay){
|
|
y = ay-h-5;
|
|
}
|
|
}
|
|
xy = [x, y];
|
|
this.storeXY(xy);
|
|
supr.setXY.call(this, xy);
|
|
this.sync();
|
|
}
|
|
}
|
|
return this;
|
|
},
|
|
|
|
getConstrainOffset : function(){
|
|
return this.shadowOffset;
|
|
},
|
|
|
|
isVisible : function(){
|
|
return this.visible;
|
|
},
|
|
|
|
// private
|
|
showAction : function(){
|
|
this.visible = true; // track visibility to prevent getStyle calls
|
|
if(this.useDisplay === true){
|
|
this.setDisplayed('');
|
|
}else if(this.lastXY){
|
|
supr.setXY.call(this, this.lastXY);
|
|
}else if(this.lastLT){
|
|
supr.setLeftTop.call(this, this.lastLT[0], this.lastLT[1]);
|
|
}
|
|
},
|
|
|
|
// private
|
|
hideAction : function(){
|
|
this.visible = false;
|
|
if(this.useDisplay === true){
|
|
this.setDisplayed(false);
|
|
}else{
|
|
this.setLeftTop(-10000,-10000);
|
|
}
|
|
},
|
|
|
|
// overridden Element method
|
|
setVisible : function(v, a, d, c, e){
|
|
if(v){
|
|
this.showAction();
|
|
}
|
|
if(a && v){
|
|
var cb = function(){
|
|
this.sync(true);
|
|
if(c){
|
|
c();
|
|
}
|
|
}.createDelegate(this);
|
|
supr.setVisible.call(this, true, true, d, cb, e);
|
|
}else{
|
|
if(!v){
|
|
this.hideUnders(true);
|
|
}
|
|
var cb = c;
|
|
if(a){
|
|
cb = function(){
|
|
this.hideAction();
|
|
if(c){
|
|
c();
|
|
}
|
|
}.createDelegate(this);
|
|
}
|
|
supr.setVisible.call(this, v, a, d, cb, e);
|
|
if(v){
|
|
this.sync(true);
|
|
}else if(!a){
|
|
this.hideAction();
|
|
}
|
|
}
|
|
return this;
|
|
},
|
|
|
|
storeXY : function(xy){
|
|
delete this.lastLT;
|
|
this.lastXY = xy;
|
|
},
|
|
|
|
storeLeftTop : function(left, top){
|
|
delete this.lastXY;
|
|
this.lastLT = [left, top];
|
|
},
|
|
|
|
// private
|
|
beforeFx : function(){
|
|
this.beforeAction();
|
|
return Ext.Layer.superclass.beforeFx.apply(this, arguments);
|
|
},
|
|
|
|
// private
|
|
afterFx : function(){
|
|
Ext.Layer.superclass.afterFx.apply(this, arguments);
|
|
this.sync(this.isVisible());
|
|
},
|
|
|
|
// private
|
|
beforeAction : function(){
|
|
if(!this.updating && this.shadow){
|
|
this.shadow.hide();
|
|
}
|
|
},
|
|
|
|
// overridden Element method
|
|
setLeft : function(left){
|
|
this.storeLeftTop(left, this.getTop(true));
|
|
supr.setLeft.apply(this, arguments);
|
|
this.sync();
|
|
return this;
|
|
},
|
|
|
|
setTop : function(top){
|
|
this.storeLeftTop(this.getLeft(true), top);
|
|
supr.setTop.apply(this, arguments);
|
|
this.sync();
|
|
return this;
|
|
},
|
|
|
|
setLeftTop : function(left, top){
|
|
this.storeLeftTop(left, top);
|
|
supr.setLeftTop.apply(this, arguments);
|
|
this.sync();
|
|
return this;
|
|
},
|
|
|
|
setXY : function(xy, a, d, c, e){
|
|
this.fixDisplay();
|
|
this.beforeAction();
|
|
this.storeXY(xy);
|
|
var cb = this.createCB(c);
|
|
supr.setXY.call(this, xy, a, d, cb, e);
|
|
if(!a){
|
|
cb();
|
|
}
|
|
return this;
|
|
},
|
|
|
|
// private
|
|
createCB : function(c){
|
|
var el = this;
|
|
return function(){
|
|
el.constrainXY();
|
|
el.sync(true);
|
|
if(c){
|
|
c();
|
|
}
|
|
};
|
|
},
|
|
|
|
// overridden Element method
|
|
setX : function(x, a, d, c, e){
|
|
this.setXY([x, this.getY()], a, d, c, e);
|
|
return this;
|
|
},
|
|
|
|
// overridden Element method
|
|
setY : function(y, a, d, c, e){
|
|
this.setXY([this.getX(), y], a, d, c, e);
|
|
return this;
|
|
},
|
|
|
|
// overridden Element method
|
|
setSize : function(w, h, a, d, c, e){
|
|
this.beforeAction();
|
|
var cb = this.createCB(c);
|
|
supr.setSize.call(this, w, h, a, d, cb, e);
|
|
if(!a){
|
|
cb();
|
|
}
|
|
return this;
|
|
},
|
|
|
|
// overridden Element method
|
|
setWidth : function(w, a, d, c, e){
|
|
this.beforeAction();
|
|
var cb = this.createCB(c);
|
|
supr.setWidth.call(this, w, a, d, cb, e);
|
|
if(!a){
|
|
cb();
|
|
}
|
|
return this;
|
|
},
|
|
|
|
// overridden Element method
|
|
setHeight : function(h, a, d, c, e){
|
|
this.beforeAction();
|
|
var cb = this.createCB(c);
|
|
supr.setHeight.call(this, h, a, d, cb, e);
|
|
if(!a){
|
|
cb();
|
|
}
|
|
return this;
|
|
},
|
|
|
|
// overridden Element method
|
|
setBounds : function(x, y, w, h, a, d, c, e){
|
|
this.beforeAction();
|
|
var cb = this.createCB(c);
|
|
if(!a){
|
|
this.storeXY([x, y]);
|
|
supr.setXY.call(this, [x, y]);
|
|
supr.setSize.call(this, w, h, a, d, cb, e);
|
|
cb();
|
|
}else{
|
|
supr.setBounds.call(this, x, y, w, h, a, d, cb, e);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
<span id='Ext-Layer-method-setZIndex'> /**
|
|
</span> * Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
|
|
* incremented by two more than the value passed in so that it always shows above any shadow or shim (the shadow
|
|
* element, if any, will be assigned z-index + 1, and the shim element, if any, will be assigned the unmodified z-index).
|
|
* @param {Number} zindex The new z-index to set
|
|
* @return {this} The Layer
|
|
*/
|
|
setZIndex : function(zindex){
|
|
this.zindex = zindex;
|
|
this.setStyle('z-index', zindex + 2);
|
|
if(this.shadow){
|
|
this.shadow.setZIndex(zindex + 1);
|
|
}
|
|
if(this.shim){
|
|
this.shim.setStyle('z-index', zindex);
|
|
}
|
|
return this;
|
|
}
|
|
});
|
|
})();
|
|
</pre>
|
|
</body>
|
|
</html>
|