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