/**
- * @class Ext.Layer
- * @extends Ext.Element
- * An extended {@link Ext.Element} object that supports a shadow and shim, constrain to viewport and
+Sencha Documentation Project
/**
+ * @class Ext.Layer
+ * @extends Ext.core.Element
+ * An extended {@link Ext.core.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
@@ -20,94 +12,135 @@
* @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 true
- * to use css style 'display:none;' to hide the Layer.
+ * 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.
+ * @cfg {String} visibilityCls The CSS class name to add in order to hide this Layer if this layer
+ * is configured with <code>{@link #hideMode}: 'asclass'</code>
+ * @cfg {String} hideMode
+ * A String which specifies how this Layer will be hidden.
+ * Values may be<div class="mdetail-params"><ul>
+ * <li><code>'display'</code> : The Component will be hidden using the <code>display: none</code> style.</li>
+ * <li><code>'visibility'</code> : The Component will be hidden using the <code>visibility: hidden</code> style.</li>
+ * <li><code>'offsets'</code> : The Component will be hidden by absolutely positioning it out of the visible area of the document. This
+ * is useful when a hidden Component must maintain measurable dimensions. Hiding using <code>display</code> results
+ * in a Component having zero dimensions.</li></ul></div>
* @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;
- var 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();
-};
+Ext.define('Ext.Layer', {
+ uses: ['Ext.Shadow'],
-var supr = Ext.Element.prototype;
+ // shims are shared among layer to keep from having 100 iframes
+ statics: {
+ shims: []
+ },
-// shims are shared among layer to keep from having 100 iframes
-var shims = [];
+ extend: 'Ext.core.Element',
-Ext.extend(Ext.Layer, Ext.Element, {
+ constructor: function(config, existingEl) {
+ config = config || {};
+ var me = this,
+ dh = Ext.core.DomHelper,
+ cp = config.parentEl,
+ pel = cp ? Ext.getDom(cp) : document.body,
+ hm = config.hideMode;
- getZIndex : function(){
- return this.zindex || parseInt((this.getShim() || this).getStyle('z-index'), 10) || 11000;
- },
+ if (existingEl) {
+ me.dom = Ext.getDom(existingEl);
+ }
+ if (!me.dom) {
+ me.dom = dh.append(pel, config.dh || {
+ tag: 'div',
+ cls: Ext.baseCSSPrefix + 'layer'
+ });
+ } else {
+ me.addCls(Ext.baseCSSPrefix + 'layer');
+ if (!me.dom.parentNode) {
+ pel.appendChild(me.dom);
+ }
+ }
- getShim : function(){
- if(!this.useShim){
- return null;
+ if (config.cls) {
+ me.addCls(config.cls);
}
- if(this.shim){
- return this.shim;
+ me.constrain = config.constrain !== false;
+
+ // Allow Components to pass their hide mode down to the Layer if they are floating.
+ // Otherwise, allow useDisplay to override the default hiding method which is visibility.
+ // TODO: Have ExtJS's Element implement visibilityMode by using classes as in Mobile.
+ if (hm) {
+ me.setVisibilityMode(Ext.core.Element[hm.toUpperCase()]);
+ if (me.visibilityMode == Ext.core.Element.ASCLASS) {
+ me.visibilityCls = config.visibilityCls;
+ }
+ } else if (config.useDisplay) {
+ me.setVisibilityMode(Ext.core.Element.DISPLAY);
+ } else {
+ me.setVisibilityMode(Ext.core.Element.VISIBILITY);
}
- var shim = shims.shift();
- if(!shim){
- shim = this.createShim();
- shim.enableDisplayMode('block');
- shim.dom.style.display = 'none';
- shim.dom.style.visibility = 'visible';
+
+ if (config.id) {
+ me.id = me.dom.id = config.id;
+ } else {
+ me.id = Ext.id(me.dom);
}
- var pn = this.dom.parentNode;
- if(shim.dom.parentNode != pn){
- pn.insertBefore(shim.dom, this.dom);
+ me.position('absolute');
+ if (config.shadow) {
+ me.shadowOffset = config.shadowOffset || 4;
+ me.shadow = Ext.create('Ext.Shadow', {
+ offset: me.shadowOffset,
+ mode: config.shadow
+ });
+ me.disableShadow();
+ } else {
+ me.shadowOffset = 0;
+ }
+ me.useShim = config.shim !== false && Ext.useShims;
+ if (config.hidden === true) {
+ me.hide();
+ } else {
+ this.show();
}
- shim.setStyle('z-index', this.getZIndex()-2);
- this.shim = shim;
- return shim;
},
- hideShim : function(){
- if(this.shim){
+ getZIndex: function() {
+ return parseInt((this.getShim() || this).getStyle('z-index'), 10);
+ },
+
+ getShim: function() {
+ var me = this,
+ shim, pn;
+
+ if (!me.useShim) {
+ return null;
+ }
+ if (!me.shim) {
+ shim = me.self.shims.shift();
+ if (!shim) {
+ shim = me.createShim();
+ shim.enableDisplayMode('block');
+ shim.hide();
+ }
+ pn = me.dom.parentNode;
+ if (shim.dom.parentNode != pn) {
+ pn.insertBefore(shim.dom, me.dom);
+ }
+ me.shim = shim;
+ }
+ return me.shim;
+ },
+
+ hideShim: function() {
+ if (this.shim) {
this.shim.setDisplayed(false);
- shims.push(this.shim);
+ this.self.shims.push(this.shim);
delete this.shim;
}
},
- disableShadow : function(){
- if(this.shadow){
+ disableShadow: function() {
+ if (this.shadow) {
this.shadowDisabled = true;
this.shadow.hide();
this.lastShadowOffset = this.shadowOffset;
@@ -115,357 +148,320 @@ Ext.extend(Ext.Layer, Ext.Element, {
}
},
- enableShadow : function(show){
- if(this.shadow){
+ enableShadow: function(show) {
+ if (this.shadow) {
this.shadowDisabled = false;
this.shadowOffset = this.lastShadowOffset;
delete this.lastShadowOffset;
- if(show){
+ 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 sw = this.shadow;
- if(!this.updating && this.isVisible() && (sw || this.useShim)){
- var sh = this.getShim();
-
- var w = this.getWidth(),
- h = this.getHeight();
-
- var l = this.getLeft(true),
- t = this.getTop(true);
-
- if(sw && !this.shadowDisabled){
- if(doShow && !sw.isVisible()){
- sw.show(this);
- }else{
- sw.realign(l, t, w, h);
+ /**
+ * @private
+ * <p>Synchronize this Layer's associated elements, the shadow, and possibly the shim.</p>
+ * <p>This code can execute repeatedly in milliseconds,
+ * eg: dragging a Component configured liveDrag: true, or which has no ghost method
+ * so code size was sacrificed for efficiency (e.g. no getBox/setBox, no XY calls)</p>
+ * @param {Boolean} doShow Pass true to ensure that the shadow is shown.
+ */
+ sync: function(doShow) {
+ var me = this,
+ shadow = me.shadow,
+ shadowPos, shimStyle, shadowSize;
+
+ if (!this.updating && this.isVisible() && (shadow || this.useShim)) {
+ var shim = this.getShim(),
+ l = this.getLeft(true),
+ t = this.getTop(true),
+ w = this.getWidth(),
+ h = this.getHeight(),
+ shimIndex;
+
+ if (shadow && !this.shadowDisabled) {
+ if (doShow && !shadow.isVisible()) {
+ shadow.show(this);
+ } else {
+ shadow.realign(l, t, w, h);
}
- if(sh){
- if(doShow){
- sh.show();
+ if (shim) {
+ // TODO: Determine how the shims zIndex is above the layer zIndex at this point
+ shimIndex = shim.getStyle('z-index');
+ if (shimIndex > me.zindex) {
+ me.shim.setStyle('z-index', me.zindex - 2);
}
+ shim.show();
// fit the shim behind the shadow, so it is shimmed too
- var a = sw.adjusts, s = sh.dom.style;
- s.left = (Math.min(l, l+a.l))+'px';
- s.top = (Math.min(t, t+a.t))+'px';
- s.width = (w+a.w)+'px';
- s.height = (h+a.h)+'px';
+ if (shadow.isVisible()) {
+ shadowPos = shadow.el.getXY();
+ shimStyle = shim.dom.style;
+ shadowSize = shadow.el.getSize();
+ shimStyle.left = (shadowPos[0]) + 'px';
+ shimStyle.top = (shadowPos[1]) + 'px';
+ shimStyle.width = (shadowSize.width) + 'px';
+ shimStyle.height = (shadowSize.height) + 'px';
+ } else {
+ shim.setSize(w, h);
+ shim.setLeftTop(l, t);
+ }
}
- }else if(sh){
- if(doShow){
- sh.show();
+ } else if (shim) {
+ // TODO: Determine how the shims zIndex is above the layer zIndex at this point
+ shimIndex = shim.getStyle('z-index');
+ if (shimIndex > me.zindex) {
+ me.shim.setStyle('z-index', me.zindex - 2);
}
- sh.setSize(w, h);
- sh.setLeftTop(l, t);
+ shim.show();
+ shim.setSize(w, h);
+ shim.setLeftTop(l, t);
}
-
}
+ return this;
},
- // private
- destroy : function(){
- this.hideShim();
- if(this.shadow){
- this.shadow.hide();
- }
- this.removeAllListeners();
- Ext.removeNode(this.dom);
- delete this.dom;
- },
-
- remove : function(){
- this.destroy();
+ remove: function() {
+ this.hideUnders();
+ this.callParent();
},
// private
- beginUpdate : function(){
+ beginUpdate: function() {
this.updating = true;
},
// private
- endUpdate : function(){
+ endUpdate: function() {
this.updating = false;
this.sync(true);
},
// private
- hideUnders : function(negOffset){
- if(this.shadow){
+ hideUnders: function() {
+ 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;
+ constrainXY: function() {
+ if (this.constrain) {
+ var vw = Ext.core.Element.getViewWidth(),
+ vh = Ext.core.Element.getViewHeight(),
+ s = Ext.getDoc().getScroll(),
+ xy = this.getXY(),
+ x = xy[0],
+ y = xy[1],
+ so = this.shadowOffset,
+ w = this.dom.offsetWidth + so,
+ h = this.dom.offsetHeight + so,
+ moved = false; // only move it if it needs it
// first validate right/bottom
- if((x + w) > vw+s.left){
+ if ((x + w) > vw + s.left) {
x = vw - w - so;
moved = true;
}
- if((y + h) > vh+s.top){
+ if ((y + h) > vh + s.top) {
y = vh - h - so;
moved = true;
}
// then make sure top/left isn't negative
- if(x < s.left){
+ if (x < s.left) {
x = s.left;
moved = true;
}
- if(y < s.top){
+ 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);
+ if (moved) {
+ Ext.Layer.superclass.setXY.call(this, [x, y]);
this.sync();
}
}
return this;
},
- 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);
- }
+ getConstrainOffset: function() {
+ return this.shadowOffset;
},
// 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);
+ setVisible: function(visible, animate, duration, callback, easing) {
+ var me = this,
+ cb;
+
+ // post operation processing
+ cb = function() {
+ if (visible) {
+ me.sync(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();
+ if (callback) {
+ callback();
}
+ };
+
+ // Hide shadow and shim if hiding
+ if (!visible) {
+ this.hideUnders(true);
+ }
+ this.callParent([visible, animate, duration, callback, easing]);
+ if (!animate) {
+ cb();
}
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(){
+ beforeFx: function() {
this.beforeAction();
- return Ext.Layer.superclass.beforeFx.apply(this, arguments);
+ return this.callParent(arguments);
},
// private
- afterFx : function(){
- Ext.Layer.superclass.afterFx.apply(this, arguments);
+ afterFx: function() {
+ this.callParent(arguments);
this.sync(this.isVisible());
},
// private
- beforeAction : function(){
- if(!this.updating && this.shadow){
+ 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;
+ setLeft: function(left) {
+ this.callParent(arguments);
+ return this.sync();
},
- setTop : function(top){
- this.storeLeftTop(this.getLeft(true), top);
- supr.setTop.apply(this, arguments);
- this.sync();
- return this;
+ setTop: function(top) {
+ this.callParent(arguments);
+ return this.sync();
},
- setLeftTop : function(left, top){
- this.storeLeftTop(left, top);
- supr.setLeftTop.apply(this, arguments);
- this.sync();
- return this;
+ setLeftTop: function(left, top) {
+ this.callParent(arguments);
+ return this.sync();
},
- setXY : function(xy, a, d, c, e){
+ setXY: function(xy, animate, duration, callback, easing) {
+
+ // Callback will restore shadow state and call the passed callback
+ callback = this.createCB(callback);
+
this.fixDisplay();
this.beforeAction();
- this.storeXY(xy);
- var cb = this.createCB(c);
- supr.setXY.call(this, xy, a, d, cb, e);
- if(!a){
- cb();
+ this.callParent([xy, animate, duration, callback, easing]);
+ if (!animate) {
+ callback();
}
return this;
},
// private
- createCB : function(c){
- var el = this;
- return function(){
- el.constrainXY();
- el.sync(true);
- if(c){
- c();
+ createCB: function(callback) {
+ var me = this,
+ showShadow = me.shadow && me.shadow.isVisible();
+
+ return function() {
+ me.constrainXY();
+ me.sync(showShadow);
+ if (callback) {
+ callback();
}
};
},
// overridden Element method
- setX : function(x, a, d, c, e){
- this.setXY([x, this.getY()], a, d, c, e);
+ setX: function(x, animate, duration, callback, easing) {
+ this.setXY([x, this.getY()], animate, duration, callback, easing);
return this;
},
// overridden Element method
- setY : function(y, a, d, c, e){
- this.setXY([this.getX(), y], a, d, c, e);
+ setY: function(y, animate, duration, callback, easing) {
+ this.setXY([this.getX(), y], animate, duration, callback, easing);
return this;
},
// overridden Element method
- setSize : function(w, h, a, d, c, e){
+ setSize: function(w, h, animate, duration, callback, easing) {
+ // Callback will restore shadow state and call the passed callback
+ callback = this.createCB(callback);
+
this.beforeAction();
- var cb = this.createCB(c);
- supr.setSize.call(this, w, h, a, d, cb, e);
- if(!a){
- cb();
+ this.callParent([w, h, animate, duration, callback, easing]);
+ if (!animate) {
+ callback();
}
return this;
},
// overridden Element method
- setWidth : function(w, a, d, c, e){
+ setWidth: function(w, animate, duration, callback, easing) {
+ // Callback will restore shadow state and call the passed callback
+ callback = this.createCB(callback);
+
this.beforeAction();
- var cb = this.createCB(c);
- supr.setWidth.call(this, w, a, d, cb, e);
- if(!a){
- cb();
+ this.callParent([w, animate, duration, callback, easing]);
+ if (!animate) {
+ callback();
}
return this;
},
// overridden Element method
- setHeight : function(h, a, d, c, e){
+ setHeight: function(h, animate, duration, callback, easing) {
+ // Callback will restore shadow state and call the passed callback
+ callback = this.createCB(callback);
+
this.beforeAction();
- var cb = this.createCB(c);
- supr.setHeight.call(this, h, a, d, cb, e);
- if(!a){
- cb();
+ this.callParent([h, animate, duration, callback, easing]);
+ if (!animate) {
+ callback();
}
return this;
},
// overridden Element method
- setBounds : function(x, y, w, h, a, d, c, e){
+ setBounds: function(x, y, width, height, animate, duration, callback, easing) {
+ // Callback will restore shadow state and call the passed callback
+ callback = this.createCB(callback);
+
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);
+ if (!animate) {
+ Ext.Layer.superclass.setXY.call(this, [x, y]);
+ Ext.Layer.superclass.setSize.call(this, width, height);
+ callback();
+ } else {
+ this.callParent([x, y, width, height, animate, duration, callback, easing]);
}
return this;
},
- /**
- * 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).
+ /**
+ * <p>Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
+ * incremented depending upon the presence of a shim or a shadow in so that it always shows above those two associated elements.</p>
+ * <p>Any shim, will be assigned the passed z-index. A shadow will be assigned the next highet z-index, and the Layer's
+ * element will receive the highest z-index.
* @param {Number} zindex The new z-index to set
* @return {this} The Layer
*/
- setZIndex : function(zindex){
+ setZIndex: function(zindex) {
this.zindex = zindex;
- this.setStyle('z-index', zindex + 2);
- if(this.shadow){
- this.shadow.setZIndex(zindex + 1);
+ if (this.getShim()) {
+ this.shim.setStyle('z-index', zindex++);
}
- if(this.shim){
- this.shim.setStyle('z-index', zindex);
+ if (this.shadow) {
+ this.shadow.setZIndex(zindex++);
}
+ this.setStyle('z-index', zindex);
return this;
}
});
-})();
-