docs/source/Floating.html

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