/*
|
This file is part of Ext JS 4.2
|
|
Copyright (c) 2011-2013 Sencha Inc
|
|
Contact: http://www.sencha.com/contact
|
|
GNU General Public License Usage
|
This file may be used under the terms of the GNU General Public License version 3.0 as
|
published by the Free Software Foundation and appearing in the file LICENSE included in the
|
packaging of this file.
|
|
Please review the following information to ensure the GNU General Public License version 3.0
|
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
|
|
If you are unsure which license is appropriate for your use, please contact the sales department
|
at http://www.sencha.com/contact.
|
|
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
|
*/
|
/**
|
* A class that manages a group of {@link Ext.Component#floating} Components and provides z-order management,
|
* and Component activation behavior, including masking below the active (topmost) Component.
|
*
|
* {@link Ext.Component#floating Floating} Components which are rendered directly into the document (such as
|
* {@link Ext.window.Window Window}s) which are {@link Ext.Component#method-show show}n are managed by a
|
* {@link Ext.WindowManager global instance}.
|
*
|
* {@link Ext.Component#floating Floating} Components which are descendants of {@link Ext.Component#floating floating}
|
* *Containers* (for example a {@link Ext.view.BoundList BoundList} within an {@link Ext.window.Window Window},
|
* or a {@link Ext.menu.Menu Menu}), are managed by a ZIndexManager owned by that floating Container. Therefore
|
* ComboBox dropdowns within Windows will have managed z-indices guaranteed to be correct, relative to the Window.
|
*/
|
Ext.define('Ext.ZIndexManager', {
|
alternateClassName: 'Ext.WindowGroup',
|
|
statics: {
|
zBase : 9000
|
},
|
|
constructor: function(container) {
|
var me = this;
|
|
me.list = {};
|
me.zIndexStack = [];
|
me.front = null;
|
|
if (container) {
|
|
// This is the ZIndexManager for an Ext.container.Container, base its zseed on the zIndex of the Container's element
|
if (container.isContainer) {
|
container.on('resize', me._onContainerResize, me);
|
me.zseed = Ext.Number.from(me.rendered ? container.getEl().getStyle('zIndex') : undefined, me.getNextZSeed());
|
// The containing element we will be dealing with (eg masking) is the content target
|
me.targetEl = container.getTargetEl();
|
me.container = container;
|
}
|
// This is the ZIndexManager for a DOM element
|
else {
|
Ext.EventManager.onWindowResize(me._onContainerResize, me);
|
me.zseed = me.getNextZSeed();
|
me.targetEl = Ext.get(container);
|
}
|
}
|
// No container passed means we are the global WindowManager. Our target is the doc body.
|
// DOM must be ready to collect that ref.
|
else {
|
Ext.EventManager.onWindowResize(me._onContainerResize, me);
|
me.zseed = me.getNextZSeed();
|
Ext.onDocumentReady(function() {
|
me.targetEl = Ext.getBody();
|
});
|
}
|
},
|
|
getNextZSeed: function() {
|
return (Ext.ZIndexManager.zBase += 10000);
|
},
|
|
setBase: function(baseZIndex) {
|
this.zseed = baseZIndex;
|
var result = this.assignZIndices();
|
this._activateLast();
|
return result;
|
},
|
|
// @private
|
assignZIndices: function() {
|
var a = this.zIndexStack,
|
len = a.length,
|
i = 0,
|
zIndex = this.zseed,
|
comp,
|
topModal;
|
|
for (; i < len; i++) {
|
comp = a[i];
|
if (comp && !comp.hidden) {
|
|
// Setting the zIndex of a Component returns the topmost zIndex consumed by
|
// that Component.
|
// If it's just a plain floating Component such as a BoundList, then the
|
// return value is the passed value plus 10, ready for the next item.
|
// If a floating *Container* has its zIndex set, it re-orders its managed
|
// floating children, starting from that new base, and returns a value 10000 above
|
// the highest zIndex which it allocates.
|
zIndex = comp.setZIndex(zIndex);
|
if (comp.modal) {
|
topModal = comp;
|
}
|
}
|
}
|
|
// If we encountered a modal in our reassigment, ensure our modal mask is just below it.
|
if (topModal) {
|
this._showModalMask(topModal)
|
}
|
return zIndex;
|
},
|
|
// @private
|
_setActiveChild: function(comp, oldFront) {
|
var front = this.front,
|
oldPreventFocus = comp.preventFocusOnActivate;
|
|
if (comp !== front) {
|
|
if (front && !front.destroying) {
|
front.setActive(false, comp);
|
}
|
this.front = comp;
|
if (comp && comp != oldFront) {
|
|
// If the previously active comp did not take focus, then do not disturb focus state by focusing the new front
|
comp.preventFocusOnActivate = comp.preventFocusOnActivate || oldFront && (oldFront.preventFocusOnActivate || !oldFront.focusOnToFront);
|
|
comp.setActive(true);
|
|
// If the modal mask was utilized by the outgoing front component, reposition it.
|
if (comp.modal) {
|
this._showModalMask(comp);
|
}
|
|
// Restore the new front's focusing flag
|
comp.preventFocusOnActivate = oldPreventFocus;
|
}
|
}
|
},
|
|
onComponentHide: function(comp){
|
this._activateLast();
|
},
|
|
// @private
|
_activateLast: function() {
|
var me = this,
|
stack = me.zIndexStack,
|
i = stack.length - 1,
|
comp;
|
|
// Go down through the z-index stack.
|
// Activate the next visible one down.
|
// If that was modal, then we're done
|
for (; i >= 0 && stack[i].hidden; --i);
|
|
// The loop found a visible floater to activate
|
if ((comp = stack[i])) {
|
me._setActiveChild(comp, me.front);
|
if (comp.modal) {
|
return;
|
}
|
}
|
// No other floater to activate, just deactivate the current one
|
else {
|
if (me.front && !me.front.destroying) {
|
me.front.setActive(false);
|
}
|
me.front = null;
|
}
|
|
// If the new top one was not modal, keep going down to find the next visible
|
// modal one to shift the modal mask down under
|
for (; i >= 0; --i) {
|
comp = stack[i];
|
// If we find a visible modal further down the zIndex stack, move the mask to just under it.
|
if (comp.isVisible() && comp.modal) {
|
me._showModalMask(comp);
|
return;
|
}
|
}
|
|
// No visible modal Component was found in the run down the stack.
|
// So hide the modal mask
|
me._hideModalMask();
|
},
|
|
_showModalMask: function(comp) {
|
var me = this,
|
zIndex = comp.el.getStyle('zIndex') - 4,
|
maskTarget = comp.floatParent ? comp.floatParent.getTargetEl() : comp.container,
|
mask = me.mask,
|
shim = me.maskShim,
|
viewSize;
|
|
if (!mask) {
|
if (Ext.isIE6) {
|
shim = me.maskShim = Ext.getBody().createChild({
|
tag: 'iframe',
|
cls : Ext.baseCSSPrefix + 'shim ' + Ext.baseCSSPrefix + 'mask-shim'
|
});
|
shim.setVisibilityMode(Ext.Element.DISPLAY);
|
}
|
|
// Create the mask at zero size so that it does not affect upcoming target measurements.
|
mask = me.mask = Ext.getBody().createChild({
|
cls: Ext.baseCSSPrefix + 'mask',
|
style: 'height:0;width:0'
|
});
|
mask.setVisibilityMode(Ext.Element.DISPLAY);
|
mask.on('click', me._onMaskClick, me);
|
}
|
|
mask.maskTarget = maskTarget;
|
viewSize = me.getMaskBox();
|
|
if (shim) {
|
shim.setStyle('zIndex', zIndex);
|
shim.show();
|
shim.setBox(viewSize);
|
}
|
mask.setStyle('zIndex', zIndex);
|
|
// setting mask box before showing it in an IE7 strict iframe within a quirks page
|
// can cause body scrolling [EXTJSIV-6219]
|
mask.show();
|
mask.setBox(viewSize);
|
},
|
|
_hideModalMask: function() {
|
var mask = this.mask,
|
maskShim = this.maskShim;
|
|
if (mask && mask.isVisible()) {
|
mask.maskTarget = undefined;
|
mask.hide();
|
if (maskShim) {
|
maskShim.hide();
|
}
|
}
|
},
|
|
_onMaskClick: function() {
|
if (this.front) {
|
this.front.focus();
|
}
|
},
|
|
getMaskBox: function(){
|
var maskTarget = this.mask.maskTarget;
|
if (maskTarget.dom === document.body) {
|
return {
|
height: Math.max(document.body.scrollHeight, Ext.dom.Element.getDocumentHeight()),
|
width: Math.max(document.body.scrollWidth, document.documentElement.clientWidth),
|
x: 0,
|
y: 0
|
};
|
} else {
|
return maskTarget.getBox();
|
}
|
},
|
|
_onContainerResize: function() {
|
var me = this,
|
mask = me.mask,
|
maskShim = me.maskShim,
|
viewSize;
|
|
if (mask && mask.isVisible()) {
|
|
// At the new container size, the mask might be *causing* the scrollbar, so to find the valid
|
// client size to mask, we must temporarily unmask the parent node.
|
mask.hide();
|
if (maskShim) {
|
maskShim.hide();
|
}
|
|
viewSize = me.getMaskBox();
|
if (maskShim) {
|
maskShim.setSize(viewSize);
|
maskShim.show();
|
}
|
mask.setSize(viewSize);
|
mask.show();
|
}
|
},
|
|
/**
|
* Registers a floating {@link Ext.Component} with this ZIndexManager. This should not
|
* need to be called under normal circumstances. Floating Components (such as Windows,
|
* BoundLists and Menus) are automatically registered with a
|
* {@link Ext.Component#zIndexManager zIndexManager} at render time.
|
*
|
* Where this may be useful is moving Windows between two ZIndexManagers. For example,
|
* to bring the Ext.MessageBox dialog under the same manager as the Desktop's
|
* ZIndexManager in the desktop sample app:
|
*
|
* MyDesktop.getDesktop().getManager().register(Ext.MessageBox);
|
*
|
* @param {Ext.Component} comp The Component to register.
|
*/
|
register : function(comp) {
|
var me = this,
|
compAfterHide = comp.afterHide;
|
|
if (comp.zIndexManager) {
|
comp.zIndexManager.unregister(comp);
|
}
|
comp.zIndexManager = me;
|
|
me.list[comp.id] = comp;
|
me.zIndexStack.push(comp);
|
|
// Hook into Component's afterHide processing
|
comp.afterHide = function() {
|
compAfterHide.apply(comp, arguments);
|
me.onComponentHide(comp);
|
};
|
},
|
|
/**
|
* Unregisters a {@link Ext.Component} from this ZIndexManager. This should not
|
* need to be called. Components are automatically unregistered upon destruction.
|
* See {@link #register}.
|
* @param {Ext.Component} comp The Component to unregister.
|
*/
|
unregister : function(comp) {
|
var me = this,
|
list = me.list;
|
|
delete comp.zIndexManager;
|
if (list && list[comp.id]) {
|
delete list[comp.id];
|
|
// Relinquish control of Component's afterHide processing
|
delete comp.afterHide;
|
Ext.Array.remove(me.zIndexStack, comp);
|
|
// Destruction requires that the topmost visible floater be activated. Same as hiding.
|
me._activateLast();
|
}
|
},
|
|
/**
|
* Gets a registered Component by id.
|
* @param {String/Object} id The id of the Component or a {@link Ext.Component} instance
|
* @return {Ext.Component}
|
*/
|
get : function(id) {
|
return id.isComponent ? id : this.list[id];
|
},
|
|
/**
|
* Brings the specified Component to the front of any other active Components in this ZIndexManager.
|
* @param {String/Object} comp The id of the Component or a {@link Ext.Component} instance
|
* @return {Boolean} True if the dialog was brought to the front, else false
|
* if it was already in front
|
*/
|
bringToFront : function(comp, preventFocus) {
|
var me = this,
|
result = false,
|
zIndexStack = me.zIndexStack;
|
|
comp = me.get(comp);
|
if (comp !== me.front) {
|
Ext.Array.remove(zIndexStack, comp);
|
if (comp.preventBringToFront) {
|
// this takes care of cases where a load mask should be displayed under a floated component
|
zIndexStack.unshift(comp);
|
} else {
|
// the default behavior is to push onto the stack
|
zIndexStack.push(comp);
|
}
|
|
me.assignZIndices();
|
|
// Activate new topmost
|
if (!preventFocus) {
|
me._activateLast();
|
}
|
result = true;
|
me.front = comp;
|
|
// If new topmost is modal, ensure the mask is there
|
if (comp.modal) {
|
me._showModalMask(comp);
|
}
|
}
|
return result;
|
},
|
|
/**
|
* Sends the specified Component to the back of other active Components in this ZIndexManager.
|
* @param {String/Object} comp The id of the Component or a {@link Ext.Component} instance
|
* @return {Ext.Component} The Component
|
*/
|
sendToBack : function(comp) {
|
var me = this;
|
|
comp = me.get(comp);
|
Ext.Array.remove(me.zIndexStack, comp);
|
me.zIndexStack.unshift(comp);
|
me.assignZIndices();
|
this._activateLast();
|
return comp;
|
},
|
|
/**
|
* Hides all Components managed by this ZIndexManager.
|
*/
|
hideAll : function() {
|
var list = this.list,
|
item,
|
id;
|
|
for (id in list) {
|
if (list.hasOwnProperty(id)) {
|
item = list[id];
|
if (item.isComponent && item.isVisible()) {
|
item.hide();
|
}
|
}
|
}
|
},
|
|
/**
|
* @private
|
* Temporarily hides all currently visible managed Components. This is for when
|
* dragging a Window which may manage a set of floating descendants in its ZIndexManager;
|
* they should all be hidden just for the duration of the drag.
|
*/
|
hide: function() {
|
var i = 0,
|
stack = this.zIndexStack,
|
len = stack.length,
|
comp;
|
|
this.tempHidden = [];
|
for (; i < len; i++) {
|
comp = stack[i];
|
if (comp.isVisible()) {
|
this.tempHidden.push(comp);
|
comp.el.hide();
|
comp.hidden = true;
|
}
|
}
|
},
|
|
/**
|
* @private
|
* Restores temporarily hidden managed Components to visibility.
|
*/
|
show: function() {
|
var i = 0,
|
tempHidden = this.tempHidden,
|
len = tempHidden ? tempHidden.length : 0,
|
comp;
|
|
for (; i < len; i++) {
|
comp = tempHidden[i];
|
comp.el.show();
|
comp.hidden = false;
|
comp.setPosition(comp.x, comp.y);
|
}
|
delete this.tempHidden;
|
},
|
|
/**
|
* Gets the currently-active Component in this ZIndexManager.
|
* @return {Ext.Component} The active Component
|
*/
|
getActive : function() {
|
return this.front;
|
},
|
|
/**
|
* Returns zero or more Components in this ZIndexManager using the custom search function passed to this method.
|
* The function should accept a single {@link Ext.Component} reference as its only argument and should
|
* return true if the Component matches the search criteria, otherwise it should return false.
|
* @param {Function} fn The search function
|
* @param {Object} [scope] The scope (this reference) in which the function is executed.
|
* Defaults to the Component being tested. That gets passed to the function if not specified.
|
* @return {Array} An array of zero or more matching windows
|
*/
|
getBy : function(fn, scope) {
|
var r = [],
|
i = 0,
|
stack = this.zIndexStack,
|
len = stack.length,
|
comp;
|
|
for (; i < len; i++) {
|
comp = stack[i];
|
if (fn.call(scope||comp, comp) !== false) {
|
r.push(comp);
|
}
|
}
|
return r;
|
},
|
|
/**
|
* Executes the specified function once for every Component in this ZIndexManager, passing each
|
* Component as the only parameter. Returning false from the function will stop the iteration.
|
* @param {Function} fn The function to execute for each item
|
* @param {Object} [scope] The scope (this reference) in which the function
|
* is executed. Defaults to the current Component in the iteration.
|
*/
|
each : function(fn, scope) {
|
var list = this.list,
|
id,
|
comp;
|
|
for (id in list) {
|
if (list.hasOwnProperty(id)) {
|
comp = list[id];
|
if (comp.isComponent && fn.call(scope || comp, comp) === false) {
|
return;
|
}
|
}
|
}
|
},
|
|
/**
|
* Executes the specified function once for every Component in this ZIndexManager, passing each
|
* Component as the only parameter. Returning false from the function will stop the iteration.
|
* The components are passed to the function starting at the bottom and proceeding to the top.
|
* @param {Function} fn The function to execute for each item
|
* @param {Object} scope (optional) The scope (this reference) in which the function
|
* is executed. Defaults to the current Component in the iteration.
|
*/
|
eachBottomUp: function (fn, scope) {
|
var stack = this.zIndexStack,
|
i = 0,
|
len = stack.length,
|
comp;
|
|
for (; i < len; i++) {
|
comp = stack[i];
|
if (comp.isComponent && fn.call(scope || comp, comp) === false) {
|
return;
|
}
|
}
|
},
|
|
/**
|
* Executes the specified function once for every Component in this ZIndexManager, passing each
|
* Component as the only parameter. Returning false from the function will stop the iteration.
|
* The components are passed to the function starting at the top and proceeding to the bottom.
|
* @param {Function} fn The function to execute for each item
|
* @param {Object} [scope] The scope (this reference) in which the function
|
* is executed. Defaults to the current Component in the iteration.
|
*/
|
eachTopDown: function (fn, scope) {
|
var stack = this.zIndexStack,
|
i = stack.length,
|
comp;
|
|
for (; i-- > 0; ) {
|
comp = stack[i];
|
if (comp.isComponent && fn.call(scope || comp, comp) === false) {
|
return;
|
}
|
}
|
},
|
|
destroy: function() {
|
var me = this,
|
list = me.list,
|
comp,
|
id;
|
|
for (id in list) {
|
if (list.hasOwnProperty(id)) {
|
comp = list[id];
|
|
if (comp.isComponent) {
|
comp.destroy();
|
}
|
}
|
}
|
|
delete me.zIndexStack;
|
delete me.list;
|
delete me.container;
|
delete me.targetEl;
|
}
|
}, function() {
|
/**
|
* @class Ext.WindowManager
|
* @extends Ext.ZIndexManager
|
*
|
* The default global floating Component group that is available automatically.
|
*
|
* This manages instances of floating Components which were rendered programatically without
|
* being added to a {@link Ext.container.Container Container}, and for floating Components
|
* which were added into non-floating Containers.
|
*
|
* *Floating* Containers create their own instance of ZIndexManager, and floating Components
|
* added at any depth below there are managed by that ZIndexManager.
|
*
|
* @singleton
|
*/
|
Ext.WindowManager = Ext.WindowMgr = new this();
|
});
|
