docs/source/Floating.html

   1 <!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'>/**
   2 </span> * @class Ext.util.Floating
   3  * A mixin to add floating capability to a Component
   4  */
   5 Ext.define('Ext.util.Floating', {
   6
   7     uses: ['Ext.Layer', 'Ext.window.Window'],
   8
   9 <span id='Ext-util.Floating-cfg-focusOnToFront'>    /**
  10 </span>     * @cfg {Boolean} focusOnToFront
  11      * Specifies whether the floated component should be automatically {@link #focus focused} when it is
  12      * {@link #toFront brought to the front}. Defaults to true.
  13      */
  14     focusOnToFront: true,
  15
  16 <span id='Ext-util.Floating-cfg-shadow'>    /**
  17 </span>     * @cfg {String/Boolean} shadow Specifies whether the floating component should be given a shadow. Set to
  18      * &lt;tt&gt;true&lt;/tt&gt; to automatically create an {@link Ext.Shadow}, or a string indicating the
  19      * shadow's display {@link Ext.Shadow#mode}. Set to &lt;tt&gt;false&lt;/tt&gt; to disable the shadow.
  20      * (Defaults to &lt;tt&gt;'sides'&lt;/tt&gt;.)
  21      */
  22     shadow: 'sides',
  23
  24     constructor: function(config) {
  25         this.floating = true;
  26         this.el = Ext.create('Ext.Layer', Ext.apply({}, config, {
  27             hideMode: this.hideMode,
  28             hidden: this.hidden,
  29             shadow: Ext.isDefined(this.shadow) ? this.shadow : 'sides',
  30             shadowOffset: this.shadowOffset,
  31             constrain: false,
  32             shim: this.shim === false ? false : undefined
  33         }), this.el);
  34     },
  35
  36     onFloatRender: function() {
  37         var me = this;
  38         me.zIndexParent = me.getZIndexParent();
  39         me.setFloatParent(me.ownerCt);
  40         delete me.ownerCt;
  41
  42         if (me.zIndexParent) {
  43             me.zIndexParent.registerFloatingItem(me);
  44         } else {
  45             Ext.WindowManager.register(me);
  46         }
  47     },
  48
  49     setFloatParent: function(floatParent) {
  50         var me = this;
  51
  52         // Remove listeners from previous floatParent
  53         if (me.floatParent) {
  54             me.mun(me.floatParent, {
  55                 hide: me.onFloatParentHide,
  56                 show: me.onFloatParentShow,
  57                 scope: me
  58             });
  59         }
  60
  61         me.floatParent = floatParent;
  62
  63         // Floating Components as children of Containers must hide when their parent hides.
  64         if (floatParent) {
  65             me.mon(me.floatParent, {
  66                 hide: me.onFloatParentHide,
  67                 show: me.onFloatParentShow,
  68                 scope: me
  69             });
  70         }
  71
  72         // If a floating Component is configured to be constrained, but has no configured
  73         // constrainTo setting, set its constrainTo to be it's ownerCt before rendering.
  74         if ((me.constrain || me.constrainHeader) &amp;&amp; !me.constrainTo) {
  75             me.constrainTo = floatParent ? floatParent.getTargetEl() : me.container;
  76         }
  77     },
  78
  79     onFloatParentHide: function() {
  80         this.showOnParentShow = this.isVisible();
  81         this.hide();
  82     },
  83
  84     onFloatParentShow: function() {
  85         if (this.showOnParentShow) {
  86             delete this.showOnParentShow;
  87             this.show();
  88         }
  89     },
  90
  91 <span id='Ext-util.Floating-method-getZIndexParent'>    /**
  92 </span>     * @private
  93      * &lt;p&gt;Finds the ancestor Container responsible for allocating zIndexes for the passed Component.&lt;/p&gt;
  94      * &lt;p&gt;That will be the outermost floating Container (a Container which has no ownerCt and has floating:true).&lt;/p&gt;
  95      * &lt;p&gt;If we have no ancestors, or we walk all the way up to the document body, there's no zIndexParent,
  96      * and the global Ext.WindowManager will be used.&lt;/p&gt;
  97      */
  98     getZIndexParent: function() {
  99         var p = this.ownerCt,
 100             c;
 101
 102         if (p) {
 103             while (p) {
 104                 c = p;
 105                 p = p.ownerCt;
 106             }
 107             if (c.floating) {
 108                 return c;
 109             }
 110         }
 111     },
 112
 113     // private
 114     // z-index is managed by the zIndexManager and may be overwritten at any time.
 115     // Returns the next z-index to be used.
 116     // If this is a Container, then it will have rebased any managed floating Components,
 117     // and so the next available z-index will be approximately 10000 above that.
 118     setZIndex: function(index) {
 119         var me = this;
 120         this.el.setZIndex(index);
 121
 122         // Next item goes 10 above;
 123         index += 10;
 124
 125         // When a Container with floating items has its z-index set, it rebases any floating items it is managing.
 126         // The returned value is a round number approximately 10000 above the last z-index used.
 127         if (me.floatingItems) {
 128             index = Math.floor(me.floatingItems.setBase(index) / 100) * 100 + 10000;
 129         }
 130         return index;
 131     },
 132
 133 <span id='Ext-util.Floating-method-doConstrain'>    /**
 134 </span>     * &lt;p&gt;Moves this floating Component into a constrain region.&lt;/p&gt;
 135      * &lt;p&gt;By default, this Component is constrained to be within the container it was added to, or the element
 136      * it was rendered to.&lt;/p&gt;
 137      * &lt;p&gt;An alternative constraint may be passed.&lt;/p&gt;
 138      * @param {Mixed} constrainTo Optional. The Element or {@link Ext.util.Region Region} into which this Component is to be constrained.
 139      */
 140     doConstrain: function(constrainTo) {
 141         var me = this,
 142             constrainEl,
 143             vector,
 144             xy;
 145
 146         if (me.constrain || me.constrainHeader) {
 147             if (me.constrainHeader) {
 148                 constrainEl = me.header.el;
 149             } else {
 150                 constrainEl = me.el;
 151             }
 152             vector = constrainEl.getConstrainVector(constrainTo || (me.floatParent &amp;&amp; me.floatParent.getTargetEl()) || me.container);
 153             if (vector) {
 154                 xy = me.getPosition();
 155                 xy[0] += vector[0];
 156                 xy[1] += vector[1];
 157                 me.setPosition(xy);
 158             }
 159         }
 160     },
 161
 162 <span id='Ext-util.Floating-method-alignTo'>    /**
 163 </span>     * Aligns this floating Component to the specified element
 164      * @param {Mixed} element The element or {@link Ext.Component} to align to. If passing a component, it must
 165      * be a omponent instance. If a string id is passed, it will be used as an element id.
 166      * @param {String} position (optional, defaults to &quot;tl-bl?&quot;) The position to align to (see {@link Ext.core.Element#alignTo} for more details).
 167      * @param {Array} offsets (optional) Offset the positioning by [x, y]
 168      * @return {Component} this
 169      */
 170     alignTo: function(element, position, offsets) {
 171         if (element.isComponent) {
 172             element = element.getEl();
 173         }
 174         var xy = this.el.getAlignToXY(element, position, offsets);
 175         this.setPagePosition(xy);
 176         return this;
 177     },
 178
 179 <span id='Ext-util.Floating-method-toFront'>    /**
 180 </span>     * &lt;p&gt;Brings this floating Component to the front of any other visible, floating Components managed by the same {@link Ext.ZIndexManager ZIndexManager}&lt;/p&gt;
 181      * &lt;p&gt;If this Component is modal, inserts the modal mask just below this Component in the z-index stack.&lt;/p&gt;
 182      * @param {Boolean} preventFocus (optional) Specify &lt;code&gt;true&lt;/code&gt; to prevent the Component from being focused.
 183      * @return {Component} this
 184      */
 185     toFront: function(preventFocus) {
 186         var me = this;
 187
 188         // Find the floating Component which provides the base for this Component's zIndexing.
 189         // That must move to front to then be able to rebase its zIndex stack and move this to the front
 190         if (me.zIndexParent) {
 191             me.zIndexParent.toFront(true);
 192         }
 193         if (me.zIndexManager.bringToFront(me)) {
 194             if (!Ext.isDefined(preventFocus)) {
 195                 preventFocus = !me.focusOnToFront;
 196             }
 197             if (!preventFocus) {
 198                 // Kick off a delayed focus request.
 199                 // If another floating Component is toFronted before the delay expires
 200                 // this will not receive focus.
 201                 me.focus(false, true);
 202             }
 203         }
 204         return me;
 205     },
 206
 207 <span id='Ext-util.Floating-method-setActive'>    /**
 208 </span>     * &lt;p&gt;This method is called internally by {@link Ext.ZIndexManager} to signal that a floating
 209      * Component has either been moved to the top of its zIndex stack, or pushed from the top of its zIndex stack.&lt;/p&gt;
 210      * &lt;p&gt;If a &lt;i&gt;Window&lt;/i&gt; is superceded by another Window, deactivating it hides its shadow.&lt;/p&gt;
 211      * &lt;p&gt;This method also fires the {@link #activate} or {@link #deactivate} event depending on which action occurred.&lt;/p&gt;
 212      * @param {Boolean} active True to activate the Component, false to deactivate it (defaults to false)
 213      * @param {Component} newActive The newly active Component which is taking over topmost zIndex position.
 214      */
 215     setActive: function(active, newActive) {
 216         if (active) {
 217             if ((this instanceof Ext.window.Window) &amp;&amp; !this.maximized) {
 218                 this.el.enableShadow(true);
 219             }
 220             this.fireEvent('activate', this);
 221         } else {
 222             // Only the *Windows* in a zIndex stack share a shadow. All other types of floaters
 223             // can keep their shadows all the time
 224             if ((this instanceof Ext.window.Window) &amp;&amp; (newActive instanceof Ext.window.Window)) {
 225                 this.el.disableShadow();
 226             }
 227             this.fireEvent('deactivate', this);
 228         }
 229     },
 230
 231 <span id='Ext-util.Floating-method-toBack'>    /**
 232 </span>     * Sends this Component to the back of (lower z-index than) any other visible windows
 233      * @return {Component} this
 234      */
 235     toBack: function() {
 236         this.zIndexManager.sendToBack(this);
 237         return this;
 238     },
 239
 240 <span id='Ext-util.Floating-method-center'>    /**
 241 </span>     * Center this Component in its container.
 242      * @return {Component} this
 243      */
 244     center: function() {
 245         var xy = this.el.getAlignToXY(this.container, 'c-c');
 246         this.setPagePosition(xy);
 247         return this;
 248     },
 249
 250     // private
 251     syncShadow : function(){
 252         if (this.floating) {
 253             this.el.sync(true);
 254         }
 255     },
 256
 257     // private
 258     fitContainer: function() {
 259         var parent = this.floatParent,
 260             container = parent ? parent.getTargetEl() : this.container,
 261             size = container.getViewSize(false);
 262
 263         this.setSize(size);
 264     }
 265 });</pre></pre></body></html>