<!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-util-Floating'>/**
|
</span> * A mixin to add floating capability to a Component.
|
*/
|
Ext.define('Ext.util.Floating', {
|
|
uses: ['Ext.Layer', 'Ext.window.Window'],
|
|
<span id='Ext-util-Floating-cfg-focusOnToFront'> /**
|
</span> * @cfg {Boolean} focusOnToFront
|
* Specifies whether the floated component should be automatically {@link Ext.Component#method-focus focused} when
|
* it is {@link #toFront brought to the front}.
|
*/
|
focusOnToFront: true,
|
|
<span id='Ext-util-Floating-cfg-shadow'> /**
|
</span> * @cfg {String/Boolean} shadow
|
* Specifies whether the floating component should be given a shadow. Set to true to automatically create an
|
* {@link Ext.Shadow}, or a string indicating the shadow's display {@link Ext.Shadow#mode}. Set to false to
|
* disable the shadow.
|
*/
|
shadow: 'sides',
|
|
<span id='Ext-util-Floating-cfg-constrain'> /**
|
</span> * @cfg {Boolean} constrain
|
* True to constrain this Components within its containing element, false to allow it to fall outside of its containing
|
* element. By default this Component will be rendered to `document.body`. To render and constrain this Component within
|
* another element specify {@link Ext.AbstractComponent#renderTo renderTo}.
|
*/
|
constrain: false,
|
|
<span id='Ext-util-Floating-cfg-fixed'> /**
|
</span> * @cfg {Boolean} [fixed=false]
|
* Configure as `true` to have this Component fixed at its `X, Y` coordinates in the browser viewport, immune
|
* to scrolling the document.
|
*
|
* *Only in browsers that support `position:fixed`*
|
*
|
* *IE6 and IE7, 8 and 9 quirks do not support `position: fixed`*
|
*/
|
|
<span id='Ext-util-Floating-cfg-shadowOffset'> /**
|
</span> * @cfg {Number} shadowOffset
|
* Number of pixels to offset the shadow.
|
*/
|
|
constructor: function (dom) {
|
var me = this;
|
|
// We do not support fixed on legacy browsers.
|
me.fixed = me.fixed && !(Ext.isIE6 || Ext.isIEQuirks);
|
|
me.el = new Ext.dom.Layer(Ext.apply({
|
preventSync : true,
|
hideMode : me.hideMode,
|
hidden : me.hidden,
|
shadow : (typeof me.shadow != 'undefined') ? me.shadow : 'sides',
|
shadowOffset : me.shadowOffset,
|
constrain : false,
|
fixed : me.fixed,
|
shim : (me.shim === false) ? false : undefined
|
}, me.floating), dom);
|
|
// If modal, and focus navigation not being handled by the FocusManager,
|
// catch tab navigation, and loop back in on tab off first or last item.
|
if (me.modal && !(Ext.FocusManager && Ext.FocusManager.enabled)) {
|
me.mon(me.el, {
|
keydown: me.onKeyDown,
|
scope: me
|
});
|
}
|
|
// clickToRaise
|
me.mon(me.el, {
|
mousedown: me.onMouseDown,
|
scope: me
|
});
|
|
// release config object (if it was one)
|
me.floating = true;
|
|
// Register with the configured ownerCt.
|
// With this we acquire a floatParent for relative positioning, and a zIndexParent which is an
|
// ancestor floater which provides zIndex management.
|
me.registerWithOwnerCt();
|
|
me.initHierarchyEvents();
|
},
|
|
<span id='Ext-util-Floating-method-initHierarchyEvents'> initHierarchyEvents: function() {
|
</span> var me = this,
|
syncHidden = this.syncHidden;
|
|
if (!me.hasHierarchyEventListeners) {
|
me.mon(me.hierarchyEventSource, {
|
hide: syncHidden,
|
collapse: syncHidden,
|
show: syncHidden,
|
expand: syncHidden,
|
added: syncHidden,
|
scope: me
|
});
|
me.hasHierarchyEventListeners = true;
|
}
|
},
|
|
<span id='Ext-util-Floating-method-registerWithOwnerCt'> registerWithOwnerCt: function() {
|
</span> var me = this,
|
ownerCt = me.ownerCt,
|
zip = me.zIndexParent;
|
|
if (zip) {
|
zip.unregisterFloatingItem(me);
|
}
|
|
// Acquire a zIndexParent by traversing the ownerCt axis for the nearest floating ancestor.
|
// This is to find a base which can allocate relative z-index values
|
zip = me.zIndexParent = me.up('[floating]');
|
|
// Set the floatParent to the ownertCt if one has been provided.
|
// Otherwise use the zIndexParent.
|
// Developers must only use ownerCt if there is really a containing relationship.
|
me.setFloatParent(ownerCt || zip);
|
delete me.ownerCt;
|
|
if (zip) {
|
zip.registerFloatingItem(me);
|
} else {
|
Ext.WindowManager.register(me);
|
}
|
},
|
|
<span id='Ext-util-Floating-method-onKeyDown'> // Listen for TAB events and wrap round if tabbing of either end of the Floater
|
</span> onKeyDown: function(e) {
|
var me = this,
|
shift,
|
focusables,
|
first,
|
last;
|
|
// If tabbing off either end, wrap round.
|
// See Ext.dom.Element.isFocusable
|
// Certain browsers always report tabIndex zero in the absence of the tabIndex attribute.
|
// Testing the specified property (Standards: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-862529273)
|
// Should filter out these cases.
|
// The exceptions are IE6 to IE8. In these browsers all elements will yield a tabIndex
|
// and therefore all elements will appear to be focusable.
|
// This adversely affects modal Floating components.
|
// These listen for the TAB key, and then test whether the event target === last focusable
|
// or first focusable element, and forcibly to a circular navigation.
|
// We cannot know the true first or last focusable element, so this problem still exists for IE6,7,8
|
if (e.getKey() == Ext.EventObject.TAB) {
|
shift = e.shiftKey;
|
focusables = me.el.query(':focusable');
|
first = focusables[0];
|
last = focusables[focusables.length - 1];
|
if (first && last && e.target === (shift ? first : last)) {
|
e.stopEvent();
|
(shift ? last : first).focus(false, true);
|
}
|
}
|
},
|
|
<span id='Ext-util-Floating-method-onMouseDown'> // @private
|
</span> // Mousedown brings to front, and programatically grabs focus *unless the mousedown was on a focusable element*
|
onMouseDown: function (e) {
|
var focusTask = this.focusTask;
|
|
if (this.floating &&
|
// get out of here if there is already a pending focus. This usually means
|
// that the handler for a mousedown on a child element set the focus on some
|
// other component, and we so not want to steal it back. See EXTJSIV-9458
|
(!focusTask || !focusTask.id)) {
|
// If what was mousedowned upon is going to claim focus anyway, pass preventFocus as true.
|
this.toFront(!!e.getTarget(':focusable'));
|
}
|
},
|
|
<span id='Ext-util-Floating-method-setFloatParent'> setFloatParent: function(floatParent) {
|
</span> var me = this;
|
|
me.floatParent = floatParent;
|
|
// If a floating Component is configured to be constrained, but has no configured
|
// constrainTo setting, set its constrainTo to be it's ownerCt before rendering.
|
if ((me.constrain || me.constrainHeader) && !me.constrainTo) {
|
me.constrainTo = floatParent ? floatParent.getTargetEl() : me.container;
|
}
|
},
|
|
<span id='Ext-util-Floating-method-syncShadow'> // @private
|
</span> syncShadow : function() {
|
if (this.floating) {
|
this.el.sync(true);
|
}
|
},
|
|
<span id='Ext-util-Floating-method-onBeforeFloatLayout'> onBeforeFloatLayout: function(){
|
</span> this.el.preventSync = true;
|
},
|
|
<span id='Ext-util-Floating-method-onAfterFloatLayout'> onAfterFloatLayout: function(){
|
</span> delete this.el.preventSync;
|
this.syncShadow();
|
},
|
|
<span id='Ext-util-Floating-method-syncHidden'> /**
|
</span> * synchronizes the hidden state of this component with the state of its hierarchy
|
* @private
|
*/
|
syncHidden: function() {
|
var me = this,
|
hidden = me.hidden || !me.rendered,
|
hierarchicallyHidden = me.hierarchicallyHidden = me.isHierarchicallyHidden(),
|
pendingShow = me.pendingShow;
|
|
if (hidden !== hierarchicallyHidden) {
|
if (hierarchicallyHidden) {
|
me.hide();
|
me.pendingShow = true;
|
} else if (pendingShow) {
|
delete me.pendingShow;
|
if (pendingShow.length) {
|
me.show.apply(me, pendingShow);
|
} else {
|
me.show();
|
}
|
}
|
}
|
},
|
|
<span id='Ext-util-Floating-method-setZIndex'> // @private
|
</span> // z-index is managed by the zIndexManager and may be overwritten at any time.
|
// Returns the next z-index to be used.
|
// If this is a Container, then it will have rebased any managed floating Components,
|
// and so the next available z-index will be approximately 10000 above that.
|
setZIndex: function(index) {
|
var me = this;
|
|
me.el.setZIndex(index);
|
|
// Next item goes 10 above;
|
index += 10;
|
|
// When a Container with floating descendants has its z-index set, it rebases any floating descendants it is managing.
|
// The returned value is a round number approximately 10000 above the last z-index used.
|
if (me.floatingDescendants) {
|
index = Math.floor(me.floatingDescendants.setBase(index) / 100) * 100 + 10000;
|
}
|
return index;
|
},
|
|
<span id='Ext-util-Floating-method-doConstrain'> /**
|
</span> * Moves this floating Component into a constrain region.
|
*
|
* By default, this Component is constrained to be within the container it was added to, or the element it was
|
* rendered to.
|
*
|
* An alternative constraint may be passed.
|
* @param {String/HTMLElement/Ext.Element/Ext.util.Region} [constrainTo] The Element or {@link Ext.util.Region Region}
|
* into which this Component is to be constrained. Defaults to the element into which this floating Component
|
* was rendered.
|
*/
|
doConstrain: function(constrainTo) {
|
var me = this,
|
// Calculate the constrained poition.
|
// calculateConstrainedPosition will provide a default constraint
|
// region if there is no explicit constrainTo, *and* there is no floatParent owner Component.
|
xy = me.calculateConstrainedPosition(constrainTo, null, true);
|
|
// false is returned if no movement is needed
|
if (xy) {
|
me.setPosition(xy);
|
}
|
},
|
|
<span id='Ext-util-Floating-method-toFront'> /**
|
</span> * Brings this floating Component to the front of any other visible, floating Components managed by the same
|
* {@link Ext.ZIndexManager ZIndexManager}
|
*
|
* If this Component is modal, inserts the modal mask just below this Component in the z-index stack.
|
*
|
* @param {Boolean} [preventFocus=false] Specify `true` to prevent the Component from being focused.
|
* @return {Ext.Component} this
|
*/
|
toFront: function(preventFocus) {
|
var me = this,
|
zip = me.zIndexParent,
|
preventFocusSetting = me.preventFocusOnActivate;
|
|
// Find the floating Component which provides the base for this Component's zIndexing.
|
// That must move to front to then be able to rebase its zIndex stack and move this to the front
|
if (zip && me.bringParentToFront !== false) {
|
zip.toFront(true);
|
}
|
|
if (!Ext.isDefined(preventFocus)) {
|
preventFocus = !me.focusOnToFront;
|
}
|
|
if (preventFocus) {
|
me.preventFocusOnActivate = true;
|
}
|
if (me.zIndexManager.bringToFront(me, preventFocus)) {
|
if (!preventFocus) {
|
// Kick off a delayed focus request.
|
// If another floating Component is toFronted before the delay expires
|
// this will not receive focus.
|
me.focus(false, true);
|
}
|
}
|
|
// Restore to original setting
|
me.preventFocusOnActivate = preventFocusSetting;
|
return me;
|
},
|
|
<span id='Ext-util-Floating-method-setActive'> /**
|
</span> * This method is called internally by {@link Ext.ZIndexManager} to signal that a floating Component has either been
|
* moved to the top of its zIndex stack, or pushed from the top of its zIndex stack.
|
*
|
* If a _Window_ is superceded by another Window, deactivating it hides its shadow.
|
*
|
* This method also fires the {@link Ext.Component#activate activate} or
|
* {@link Ext.Component#deactivate deactivate} event depending on which action occurred.
|
*
|
* @param {Boolean} [active=false] True to activate the Component, false to deactivate it.
|
* @param {Ext.Component} [newActive] The newly active Component which is taking over topmost zIndex position.
|
*/
|
setActive: function(active, newActive) {
|
var me = this;
|
|
if (active) {
|
if (me.el.shadow && !me.maximized) {
|
me.el.enableShadow(true);
|
}
|
if (!me.preventFocusOnActivate) {
|
me.focus(false, true);
|
}
|
me.fireEvent('activate', me);
|
} else {
|
// Only the *Windows* in a zIndex stack share a shadow. All other types of floaters
|
// can keep their shadows all the time
|
if (me.isWindow && (newActive && newActive.isWindow) && me.hideShadowOnDeactivate) {
|
me.el.disableShadow();
|
}
|
me.fireEvent('deactivate', me);
|
}
|
},
|
|
<span id='Ext-util-Floating-method-toBack'> /**
|
</span> * Sends this Component to the back of (lower z-index than) any other visible windows
|
* @return {Ext.Component} this
|
*/
|
toBack: function() {
|
this.zIndexManager.sendToBack(this);
|
return this;
|
},
|
|
<span id='Ext-util-Floating-method-center'> /**
|
</span> * Center this Component in its container.
|
* @return {Ext.Component} this
|
*/
|
center: function() {
|
var me = this,
|
xy;
|
|
if (me.isVisible()) {
|
xy = me.getAlignToXY(me.container, 'c-c');
|
me.setPagePosition(xy);
|
} else {
|
me.needsCenter = true;
|
}
|
return me;
|
},
|
|
<span id='Ext-util-Floating-method-onFloatShow'> onFloatShow: function() {
|
</span> if (this.needsCenter) {
|
this.center();
|
}
|
delete this.needsCenter;
|
},
|
|
<span id='Ext-util-Floating-method-fitContainer'> // @private
|
</span> fitContainer: function(animate) {
|
var me = this,
|
parent = me.floatParent,
|
container = parent ? parent.getTargetEl() : me.container,
|
newBox = container.getViewSize(false),
|
newPosition = parent || (container.dom !== document.body) ?
|
// If we are a contained floater, or rendered to a div, maximized position is (0,0)
|
[0, 0] :
|
// If no parent and rendered to body, align with origin of container el.
|
container.getXY();
|
|
newBox.x = newPosition[0];
|
newBox.y = newPosition[1];
|
me.setBox(newBox, animate);
|
}
|
});
|
</pre>
|
</body>
|
</html>
|
