--- /dev/null
+<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-util.Floating'>/**
+</span> * @class Ext.util.Floating
+ * 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 #focus focused} when it is
+ * {@link #toFront brought to the front}. Defaults to true.
+ */
+ 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
+ * <tt>true</tt> to automatically create an {@link Ext.Shadow}, or a string indicating the
+ * shadow's display {@link Ext.Shadow#mode}. Set to <tt>false</tt> to disable the shadow.
+ * (Defaults to <tt>'sides'</tt>.)
+ */
+ shadow: 'sides',
+
+ constructor: function(config) {
+ this.floating = true;
+ this.el = Ext.create('Ext.Layer', Ext.apply({}, config, {
+ hideMode: this.hideMode,
+ hidden: this.hidden,
+ shadow: Ext.isDefined(this.shadow) ? this.shadow : 'sides',
+ shadowOffset: this.shadowOffset,
+ constrain: false,
+ shim: this.shim === false ? false : undefined
+ }), this.el);
+ },
+
+ onFloatRender: function() {
+ var me = this;
+ me.zIndexParent = me.getZIndexParent();
+ me.setFloatParent(me.ownerCt);
+ delete me.ownerCt;
+
+ if (me.zIndexParent) {
+ me.zIndexParent.registerFloatingItem(me);
+ } else {
+ Ext.WindowManager.register(me);
+ }
+ },
+
+ setFloatParent: function(floatParent) {
+ var me = this;
+
+ // Remove listeners from previous floatParent
+ if (me.floatParent) {
+ me.mun(me.floatParent, {
+ hide: me.onFloatParentHide,
+ show: me.onFloatParentShow,
+ scope: me
+ });
+ }
+
+ me.floatParent = floatParent;
+
+ // Floating Components as children of Containers must hide when their parent hides.
+ if (floatParent) {
+ me.mon(me.floatParent, {
+ hide: me.onFloatParentHide,
+ show: me.onFloatParentShow,
+ scope: me
+ });
+ }
+
+ // 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;
+ }
+ },
+
+ onFloatParentHide: function() {
+ this.showOnParentShow = this.isVisible();
+ this.hide();
+ },
+
+ onFloatParentShow: function() {
+ if (this.showOnParentShow) {
+ delete this.showOnParentShow;
+ this.show();
+ }
+ },
+
+<span id='Ext-util.Floating-method-getZIndexParent'> /**
+</span> * @private
+ * <p>Finds the ancestor Container responsible for allocating zIndexes for the passed Component.</p>
+ * <p>That will be the outermost floating Container (a Container which has no ownerCt and has floating:true).</p>
+ * <p>If we have no ancestors, or we walk all the way up to the document body, there's no zIndexParent,
+ * and the global Ext.WindowManager will be used.</p>
+ */
+ getZIndexParent: function() {
+ var p = this.ownerCt,
+ c;
+
+ if (p) {
+ while (p) {
+ c = p;
+ p = p.ownerCt;
+ }
+ if (c.floating) {
+ return c;
+ }
+ }
+ },
+
+ // private
+ // 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;
+ this.el.setZIndex(index);
+
+ // Next item goes 10 above;
+ index += 10;
+
+ // When a Container with floating items has its z-index set, it rebases any floating items it is managing.
+ // The returned value is a round number approximately 10000 above the last z-index used.
+ if (me.floatingItems) {
+ index = Math.floor(me.floatingItems.setBase(index) / 100) * 100 + 10000;
+ }
+ return index;
+ },
+
+<span id='Ext-util.Floating-method-doConstrain'> /**
+</span> * <p>Moves this floating Component into a constrain region.</p>
+ * <p>By default, this Component is constrained to be within the container it was added to, or the element
+ * it was rendered to.</p>
+ * <p>An alternative constraint may be passed.</p>
+ * @param {Mixed} constrainTo Optional. The Element or {@link Ext.util.Region Region} into which this Component is to be constrained.
+ */
+ doConstrain: function(constrainTo) {
+ var me = this,
+ constrainEl,
+ vector,
+ xy;
+
+ if (me.constrain || me.constrainHeader) {
+ if (me.constrainHeader) {
+ constrainEl = me.header.el;
+ } else {
+ constrainEl = me.el;
+ }
+ vector = constrainEl.getConstrainVector(constrainTo || (me.floatParent && me.floatParent.getTargetEl()) || me.container);
+ if (vector) {
+ xy = me.getPosition();
+ xy[0] += vector[0];
+ xy[1] += vector[1];
+ me.setPosition(xy);
+ }
+ }
+ },
+
+<span id='Ext-util.Floating-method-alignTo'> /**
+</span> * Aligns this floating Component to the specified element
+ * @param {Mixed} element The element or {@link Ext.Component} to align to. If passing a component, it must
+ * be a omponent instance. If a string id is passed, it will be used as an element id.
+ * @param {String} position (optional, defaults to "tl-bl?") The position to align to (see {@link Ext.core.Element#alignTo} for more details).
+ * @param {Array} offsets (optional) Offset the positioning by [x, y]
+ * @return {Component} this
+ */
+ alignTo: function(element, position, offsets) {
+ if (element.isComponent) {
+ element = element.getEl();
+ }
+ var xy = this.el.getAlignToXY(element, position, offsets);
+ this.setPagePosition(xy);
+ return this;
+ },
+
+<span id='Ext-util.Floating-method-toFront'> /**
+</span> * <p>Brings this floating Component to the front of any other visible, floating Components managed by the same {@link Ext.ZIndexManager ZIndexManager}</p>
+ * <p>If this Component is modal, inserts the modal mask just below this Component in the z-index stack.</p>
+ * @param {Boolean} preventFocus (optional) Specify <code>true</code> to prevent the Component from being focused.
+ * @return {Component} this
+ */
+ toFront: function(preventFocus) {
+ var me = this;
+
+ // 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 (me.zIndexParent) {
+ me.zIndexParent.toFront(true);
+ }
+ if (me.zIndexManager.bringToFront(me)) {
+ if (!Ext.isDefined(preventFocus)) {
+ preventFocus = !me.focusOnToFront;
+ }
+ 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);
+ }
+ }
+ return me;
+ },
+
+<span id='Ext-util.Floating-method-setActive'> /**
+</span> * <p>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.</p>
+ * <p>If a <i>Window</i> is superceded by another Window, deactivating it hides its shadow.</p>
+ * <p>This method also fires the {@link #activate} or {@link #deactivate} event depending on which action occurred.</p>
+ * @param {Boolean} active True to activate the Component, false to deactivate it (defaults to false)
+ * @param {Component} newActive The newly active Component which is taking over topmost zIndex position.
+ */
+ setActive: function(active, newActive) {
+ if (active) {
+ if ((this instanceof Ext.window.Window) && !this.maximized) {
+ this.el.enableShadow(true);
+ }
+ this.fireEvent('activate', this);
+ } else {
+ // Only the *Windows* in a zIndex stack share a shadow. All other types of floaters
+ // can keep their shadows all the time
+ if ((this instanceof Ext.window.Window) && (newActive instanceof Ext.window.Window)) {
+ this.el.disableShadow();
+ }
+ this.fireEvent('deactivate', this);
+ }
+ },
+
+<span id='Ext-util.Floating-method-toBack'> /**
+</span> * Sends this Component to the back of (lower z-index than) any other visible windows
+ * @return {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 {Component} this
+ */
+ center: function() {
+ var xy = this.el.getAlignToXY(this.container, 'c-c');
+ this.setPagePosition(xy);
+ return this;
+ },
+
+ // private
+ syncShadow : function(){
+ if (this.floating) {
+ this.el.sync(true);
+ }
+ },
+
+ // private
+ fitContainer: function() {
+ var parent = this.floatParent,
+ container = parent ? parent.getTargetEl() : this.container,
+ size = container.getViewSize(false);
+
+ this.setSize(size);
+ }
+});</pre></pre></body></html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff