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         this.showOnParentShow = this.isVisible();
  98         this.hide();
  99     },
 100
 101     onFloatParentShow: function() {
 102         if (this.showOnParentShow) {
 103             delete this.showOnParentShow;
 104             this.show();
 105         }
 106     },
 107
 108 <span id='Ext-util-Floating-method-getZIndexParent'>    /**
 109 </span>     * @private
 110      * &lt;p&gt;Finds the ancestor Container responsible for allocating zIndexes for the passed Component.&lt;/p&gt;
 111      * &lt;p&gt;That will be the outermost floating Container (a Container which has no ownerCt and has floating:true).&lt;/p&gt;
 112      * &lt;p&gt;If we have no ancestors, or we walk all the way up to the document body, there's no zIndexParent,
 113      * and the global Ext.WindowManager will be used.&lt;/p&gt;
 114      */
 115     getZIndexParent: function() {
 116         var p = this.ownerCt,
 117             c;
 118
 119         if (p) {
 120             while (p) {
 121                 c = p;
 122                 p = p.ownerCt;
 123             }
 124             if (c.floating) {
 125                 return c;
 126             }
 127         }
 128     },
 129
 130     // private
 131     // z-index is managed by the zIndexManager and may be overwritten at any time.
 132     // Returns the next z-index to be used.
 133     // If this is a Container, then it will have rebased any managed floating Components,
 134     // and so the next available z-index will be approximately 10000 above that.
 135     setZIndex: function(index) {
 136         var me = this;
 137         this.el.setZIndex(index);
 138
 139         // Next item goes 10 above;
 140         index += 10;
 141
 142         // When a Container with floating items has its z-index set, it rebases any floating items it is managing.
 143         // The returned value is a round number approximately 10000 above the last z-index used.
 144         if (me.floatingItems) {
 145             index = Math.floor(me.floatingItems.setBase(index) / 100) * 100 + 10000;
 146         }
 147         return index;
 148     },
 149
 150 <span id='Ext-util-Floating-method-doConstrain'>    /**
 151 </span>     * &lt;p&gt;Moves this floating Component into a constrain region.&lt;/p&gt;
 152      * &lt;p&gt;By default, this Component is constrained to be within the container it was added to, or the element
 153      * it was rendered to.&lt;/p&gt;
 154      * &lt;p&gt;An alternative constraint may be passed.&lt;/p&gt;
 155      * @param {Mixed} constrainTo Optional. The Element or {@link Ext.util.Region Region} into which this Component is to be constrained.
 156      */
 157     doConstrain: function(constrainTo) {
 158         var me = this,
 159             vector = me.getConstrainVector(constrainTo),
 160             xy;
 161
 162         if (vector) {
 163             xy = me.getPosition();
 164             xy[0] += vector[0];
 165             xy[1] += vector[1];
 166             me.setPosition(xy);
 167         }
 168     },
 169
 170
 171 <span id='Ext-util-Floating-method-getConstrainVector'>    /**
 172 </span>     * Gets the x/y offsets to constrain this float
 173      * @private
 174      * @param {Mixed} constrainTo Optional. The Element or {@link Ext.util.Region Region} into which this Component is to be constrained.
 175      * @return {Array} The x/y constraints
 176      */
 177     getConstrainVector: function(constrainTo){
 178         var me = this,
 179             el;
 180
 181         if (me.constrain || me.constrainHeader) {
 182             el = me.constrainHeader ? me.header.el : me.el;
 183             constrainTo = constrainTo || (me.floatParent &amp;&amp; me.floatParent.getTargetEl()) || me.container;
 184             return el.getConstrainVector(constrainTo);
 185         }
 186     },
 187
 188 <span id='Ext-util-Floating-method-alignTo'>    /**
 189 </span>     * Aligns this floating Component to the specified element
 190      * @param {Mixed} element The element or {@link Ext.Component} to align to. If passing a component, it must
 191      * be a omponent instance. If a string id is passed, it will be used as an element id.
 192      * @param {String} position (optional, defaults to &quot;tl-bl?&quot;) The position to align to (see {@link Ext.core.Element#alignTo} for more details).
 193      * @param {Array} offsets (optional) Offset the positioning by [x, y]
 194      * @return {Component} this
 195      */
 196     alignTo: function(element, position, offsets) {
 197         if (element.isComponent) {
 198             element = element.getEl();
 199         }
 200         var xy = this.el.getAlignToXY(element, position, offsets);
 201         this.setPagePosition(xy);
 202         return this;
 203     },
 204
 205 <span id='Ext-util-Floating-method-toFront'>    /**
 206 </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;
 207      * &lt;p&gt;If this Component is modal, inserts the modal mask just below this Component in the z-index stack.&lt;/p&gt;
 208      * @param {Boolean} preventFocus (optional) Specify &lt;code&gt;true&lt;/code&gt; to prevent the Component from being focused.
 209      * @return {Component} this
 210      */
 211     toFront: function(preventFocus) {
 212         var me = this;
 213
 214         // Find the floating Component which provides the base for this Component's zIndexing.
 215         // That must move to front to then be able to rebase its zIndex stack and move this to the front
 216         if (me.zIndexParent) {
 217             me.zIndexParent.toFront(true);
 218         }
 219         if (me.zIndexManager.bringToFront(me)) {
 220             if (!Ext.isDefined(preventFocus)) {
 221                 preventFocus = !me.focusOnToFront;
 222             }
 223             if (!preventFocus) {
 224                 // Kick off a delayed focus request.
 225                 // If another floating Component is toFronted before the delay expires
 226                 // this will not receive focus.
 227                 me.focus(false, true);
 228             }
 229         }
 230         return me;
 231     },
 232
 233 <span id='Ext-util-Floating-method-setActive'>    /**
 234 </span>     * &lt;p&gt;This method is called internally by {@link Ext.ZIndexManager} to signal that a floating
 235      * Component has either been moved to the top of its zIndex stack, or pushed from the top of its zIndex stack.&lt;/p&gt;
 236      * &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;
 237      * &lt;p&gt;This method also fires the {@link #activate} or {@link #deactivate} event depending on which action occurred.&lt;/p&gt;
 238      * @param {Boolean} active True to activate the Component, false to deactivate it (defaults to false)
 239      * @param {Component} newActive The newly active Component which is taking over topmost zIndex position.
 240      */
 241     setActive: function(active, newActive) {
 242         if (active) {
 243             if ((this instanceof Ext.window.Window) &amp;&amp; !this.maximized) {
 244                 this.el.enableShadow(true);
 245             }
 246             this.fireEvent('activate', this);
 247         } else {
 248             // Only the *Windows* in a zIndex stack share a shadow. All other types of floaters
 249             // can keep their shadows all the time
 250             if ((this instanceof Ext.window.Window) &amp;&amp; (newActive instanceof Ext.window.Window)) {
 251                 this.el.disableShadow();
 252             }
 253             this.fireEvent('deactivate', this);
 254         }
 255     },
 256
 257 <span id='Ext-util-Floating-method-toBack'>    /**
 258 </span>     * Sends this Component to the back of (lower z-index than) any other visible windows
 259      * @return {Component} this
 260      */
 261     toBack: function() {
 262         this.zIndexManager.sendToBack(this);
 263         return this;
 264     },
 265
 266 <span id='Ext-util-Floating-method-center'>    /**
 267 </span>     * Center this Component in its container.
 268      * @return {Component} this
 269      */
 270     center: function() {
 271         var xy = this.el.getAlignToXY(this.container, 'c-c');
 272         this.setPagePosition(xy);
 273         return this;
 274     },
 275
 276     // private
 277     syncShadow : function(){
 278         if (this.floating) {
 279             this.el.sync(true);
 280         }
 281     },
 282
 283     // private
 284     fitContainer: function() {
 285         var parent = this.floatParent,
 286             container = parent ? parent.getTargetEl() : this.container,
 287             size = container.getViewSize(false);
 288
 289         this.setSize(size);
 290     }
 291 });</pre>
 292 </body>
 293 </html>