docs/source/ZIndexManager.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-ZIndexManager'>/**
  19 </span> * @class Ext.ZIndexManager
  20  * &lt;p&gt;A class that manages a group of {@link Ext.Component#floating} Components and provides z-order management,
  21  * and Component activation behavior, including masking below the active (topmost) Component.&lt;/p&gt;
  22  * &lt;p&gt;{@link Ext.Component#floating Floating} Components which are rendered directly into the document (Such as {@link Ext.window.Window Window}s which are
  23  * {@link Ext.Component#show show}n are managed by a {@link Ext.WindowManager global instance}.&lt;/p&gt;
  24  * &lt;p&gt;{@link Ext.Component#floating Floating} Components which are descendants of {@link Ext.Component#floating floating} &lt;i&gt;Containers&lt;/i&gt;
  25  * (For example a {Ext.view.BoundList BoundList} within an {@link Ext.window.Window Window}, or a {@link Ext.menu.Menu Menu}),
  26  * are managed by a ZIndexManager owned by that floating Container. So ComboBox dropdowns within Windows will have managed z-indices
  27  * guaranteed to be correct, relative to the Window.&lt;/p&gt;
  28  */
  29 Ext.define('Ext.ZIndexManager', {
  30
  31     alternateClassName: 'Ext.WindowGroup',
  32
  33     statics: {
  34         zBase : 9000
  35     },
  36
  37     constructor: function(container) {
  38         var me = this;
  39
  40         me.list = {};
  41         me.zIndexStack = [];
  42         me.front = null;
  43
  44         if (container) {
  45
  46             // This is the ZIndexManager for an Ext.container.Container, base its zseed on the zIndex of the Container's element
  47             if (container.isContainer) {
  48                 container.on('resize', me._onContainerResize, me);
  49                 me.zseed = Ext.Number.from(container.getEl().getStyle('zIndex'), me.getNextZSeed());
  50                 // The containing element we will be dealing with (eg masking) is the content target
  51                 me.targetEl = container.getTargetEl();
  52                 me.container = container;
  53             }
  54             // This is the ZIndexManager for a DOM element
  55             else {
  56                 Ext.EventManager.onWindowResize(me._onContainerResize, me);
  57                 me.zseed = me.getNextZSeed();
  58                 me.targetEl = Ext.get(container);
  59             }
  60         }
  61         // No container passed means we are the global WindowManager. Our target is the doc body.
  62         // DOM must be ready to collect that ref.
  63         else {
  64             Ext.EventManager.onWindowResize(me._onContainerResize, me);
  65             me.zseed = me.getNextZSeed();
  66             Ext.onDocumentReady(function() {
  67                 me.targetEl = Ext.getBody();
  68             });
  69         }
  70     },
  71
  72     getNextZSeed: function() {
  73         return (Ext.ZIndexManager.zBase += 10000);
  74     },
  75
  76     setBase: function(baseZIndex) {
  77         this.zseed = baseZIndex;
  78         return this.assignZIndices();
  79     },
  80
  81     // private
  82     assignZIndices: function() {
  83         var a = this.zIndexStack,
  84             len = a.length,
  85             i = 0,
  86             zIndex = this.zseed,
  87             comp;
  88
  89         for (; i &lt; len; i++) {
  90             comp = a[i];
  91             if (comp &amp;&amp; !comp.hidden) {
  92
  93                 // Setting the zIndex of a Component returns the topmost zIndex consumed by
  94                 // that Component.
  95                 // If it's just a plain floating Component such as a BoundList, then the
  96                 // return value is the passed value plus 10, ready for the next item.
  97                 // If a floating *Container* has its zIndex set, it re-orders its managed
  98                 // floating children, starting from that new base, and returns a value 10000 above
  99                 // the highest zIndex which it allocates.
 100                 zIndex = comp.setZIndex(zIndex);
 101             }
 102         }
 103         this._activateLast();
 104         return zIndex;
 105     },
 106
 107     // private
 108     _setActiveChild: function(comp) {
 109         if (comp != this.front) {
 110
 111             if (this.front) {
 112                 this.front.setActive(false, comp);
 113             }
 114             this.front = comp;
 115             if (comp) {
 116                 comp.setActive(true);
 117                 if (comp.modal) {
 118                     this._showModalMask(comp.el.getStyle('zIndex') - 4);
 119                 }
 120             }
 121         }
 122     },
 123
 124     // private
 125     _activateLast: function(justHidden) {
 126         var comp,
 127             lastActivated = false,
 128             i;
 129
 130         // Go down through the z-index stack.
 131         // Activate the next visible one down.
 132         // Keep going down to find the next visible modal one to shift the modal mask down under
 133         for (i = this.zIndexStack.length-1; i &gt;= 0; --i) {
 134             comp = this.zIndexStack[i];
 135             if (!comp.hidden) {
 136                 if (!lastActivated) {
 137                     this._setActiveChild(comp);
 138                     lastActivated = true;
 139                 }
 140
 141                 // Move any modal mask down to just under the next modal floater down the stack
 142                 if (comp.modal) {
 143                     this._showModalMask(comp.el.getStyle('zIndex') - 4);
 144                     return;
 145                 }
 146             }
 147         }
 148
 149         // none to activate, so there must be no modal mask.
 150         // And clear the currently active property
 151         this._hideModalMask();
 152         if (!lastActivated) {
 153             this._setActiveChild(null);
 154         }
 155     },
 156
 157     _showModalMask: function(zIndex) {
 158         if (!this.mask) {
 159             this.mask = this.targetEl.createChild({
 160                 cls: Ext.baseCSSPrefix + 'mask'
 161             });
 162             this.mask.setVisibilityMode(Ext.core.Element.DISPLAY);
 163             this.mask.on('click', this._onMaskClick, this);
 164         }
 165         Ext.getBody().addCls(Ext.baseCSSPrefix + 'body-masked');
 166         this.mask.setSize(this.targetEl.getViewSize(true));
 167         this.mask.setStyle('zIndex', zIndex);
 168         this.mask.show();
 169     },
 170
 171     _hideModalMask: function() {
 172         if (this.mask) {
 173             Ext.getBody().removeCls(Ext.baseCSSPrefix + 'body-masked');
 174             this.mask.hide();
 175         }
 176     },
 177
 178     _onMaskClick: function() {
 179         if (this.front) {
 180             this.front.focus();
 181         }
 182     },
 183
 184     _onContainerResize: function() {
 185         if (this.mask &amp;&amp; this.mask.isVisible()) {
 186             this.mask.setSize(this.targetEl.getViewSize(true));
 187         }
 188     },
 189
 190 <span id='Ext-ZIndexManager-method-register'>    /**
 191 </span>     * &lt;p&gt;Registers a floating {@link Ext.Component} with this ZIndexManager. This should not
 192      * need to be called under normal circumstances. Floating Components (such as Windows, BoundLists and Menus) are automatically registered
 193      * with a {@link Ext.Component#zIndexManager zIndexManager} at render time.&lt;/p&gt;
 194      * &lt;p&gt;Where this may be useful is moving Windows between two ZIndexManagers. For example,
 195      * to bring the Ext.MessageBox dialog under the same manager as the Desktop's
 196      * ZIndexManager in the desktop sample app:&lt;/p&gt;&lt;code&gt;&lt;pre&gt;
 197 MyDesktop.getDesktop().getManager().register(Ext.MessageBox);
 198 &lt;/pre&gt;&lt;/code&gt;
 199      * @param {Component} comp The Component to register.
 200      */
 201     register : function(comp) {
 202         if (comp.zIndexManager) {
 203             comp.zIndexManager.unregister(comp);
 204         }
 205         comp.zIndexManager = this;
 206
 207         this.list[comp.id] = comp;
 208         this.zIndexStack.push(comp);
 209         comp.on('hide', this._activateLast, this);
 210     },
 211
 212 <span id='Ext-ZIndexManager-method-unregister'>    /**
 213 </span>     * &lt;p&gt;Unregisters a {@link Ext.Component} from this ZIndexManager. This should not
 214      * need to be called. Components are automatically unregistered upon destruction.
 215      * See {@link #register}.&lt;/p&gt;
 216      * @param {Component} comp The Component to unregister.
 217      */
 218     unregister : function(comp) {
 219         delete comp.zIndexManager;
 220         if (this.list &amp;&amp; this.list[comp.id]) {
 221             delete this.list[comp.id];
 222             comp.un('hide', this._activateLast);
 223             Ext.Array.remove(this.zIndexStack, comp);
 224
 225             // Destruction requires that the topmost visible floater be activated. Same as hiding.
 226             this._activateLast(comp);
 227         }
 228     },
 229
 230 <span id='Ext-ZIndexManager-method-get'>    /**
 231 </span>     * Gets a registered Component by id.
 232      * @param {String/Object} id The id of the Component or a {@link Ext.Component} instance
 233      * @return {Ext.Component}
 234      */
 235     get : function(id) {
 236         return typeof id == &quot;object&quot; ? id : this.list[id];
 237     },
 238
 239 <span id='Ext-ZIndexManager-method-bringToFront'>   /**
 240 </span>     * Brings the specified Component to the front of any other active Components in this ZIndexManager.
 241      * @param {String/Object} comp The id of the Component or a {@link Ext.Component} instance
 242      * @return {Boolean} True if the dialog was brought to the front, else false
 243      * if it was already in front
 244      */
 245     bringToFront : function(comp) {
 246         comp = this.get(comp);
 247         if (comp != this.front) {
 248             Ext.Array.remove(this.zIndexStack, comp);
 249             this.zIndexStack.push(comp);
 250             this.assignZIndices();
 251             return true;
 252         }
 253         if (comp.modal) {
 254             Ext.getBody().addCls(Ext.baseCSSPrefix + 'body-masked');
 255             this.mask.setSize(Ext.core.Element.getViewWidth(true), Ext.core.Element.getViewHeight(true));
 256             this.mask.show();
 257         }
 258         return false;
 259     },
 260
 261 <span id='Ext-ZIndexManager-method-sendToBack'>    /**
 262 </span>     * Sends the specified Component to the back of other active Components in this ZIndexManager.
 263      * @param {String/Object} comp The id of the Component or a {@link Ext.Component} instance
 264      * @return {Ext.Component} The Component
 265      */
 266     sendToBack : function(comp) {
 267         comp = this.get(comp);
 268         Ext.Array.remove(this.zIndexStack, comp);
 269         this.zIndexStack.unshift(comp);
 270         this.assignZIndices();
 271         return comp;
 272     },
 273
 274 <span id='Ext-ZIndexManager-method-hideAll'>    /**
 275 </span>     * Hides all Components managed by this ZIndexManager.
 276      */
 277     hideAll : function() {
 278         for (var id in this.list) {
 279             if (this.list[id].isComponent &amp;&amp; this.list[id].isVisible()) {
 280                 this.list[id].hide();
 281             }
 282         }
 283     },
 284
 285 <span id='Ext-ZIndexManager-method-hide'>    /**
 286 </span>     * @private
 287      * Temporarily hides all currently visible managed Components. This is for when
 288      * dragging a Window which may manage a set of floating descendants in its ZIndexManager;
 289      * they should all be hidden just for the duration of the drag.
 290      */
 291     hide: function() {
 292         var i = 0,
 293             ln = this.zIndexStack.length,
 294             comp;
 295
 296         this.tempHidden = [];
 297         for (; i &lt; ln; i++) {
 298             comp = this.zIndexStack[i];
 299             if (comp.isVisible()) {
 300                 this.tempHidden.push(comp);
 301                 comp.hide();
 302             }
 303         }
 304     },
 305
 306 <span id='Ext-ZIndexManager-method-show'>    /**
 307 </span>     * @private
 308      * Restores temporarily hidden managed Components to visibility.
 309      */
 310     show: function() {
 311         var i = 0,
 312             ln = this.tempHidden.length,
 313             comp,
 314             x,
 315             y;
 316
 317         for (; i &lt; ln; i++) {
 318             comp = this.tempHidden[i];
 319             x = comp.x;
 320             y = comp.y;
 321             comp.show();
 322             comp.setPosition(x, y);
 323         }
 324         delete this.tempHidden;
 325     },
 326
 327 <span id='Ext-ZIndexManager-method-getActive'>    /**
 328 </span>     * Gets the currently-active Component in this ZIndexManager.
 329      * @return {Ext.Component} The active Component
 330      */
 331     getActive : function() {
 332         return this.front;
 333     },
 334
 335 <span id='Ext-ZIndexManager-method-getBy'>    /**
 336 </span>     * Returns zero or more Components in this ZIndexManager using the custom search function passed to this method.
 337      * The function should accept a single {@link Ext.Component} reference as its only argument and should
 338      * return true if the Component matches the search criteria, otherwise it should return false.
 339      * @param {Function} fn The search function
 340      * @param {Object} scope (optional) The scope (&lt;code&gt;this&lt;/code&gt; reference) in which the function is executed. Defaults to the Component being tested.
 341      * that gets passed to the function if not specified)
 342      * @return {Array} An array of zero or more matching windows
 343      */
 344     getBy : function(fn, scope) {
 345         var r = [],
 346             i = 0,
 347             len = this.zIndexStack.length,
 348             comp;
 349
 350         for (; i &lt; len; i++) {
 351             comp = this.zIndexStack[i];
 352             if (fn.call(scope||comp, comp) !== false) {
 353                 r.push(comp);
 354             }
 355         }
 356         return r;
 357     },
 358
 359 <span id='Ext-ZIndexManager-method-each'>    /**
 360 </span>     * Executes the specified function once for every Component in this ZIndexManager, passing each
 361      * Component as the only parameter. Returning false from the function will stop the iteration.
 362      * @param {Function} fn The function to execute for each item
 363      * @param {Object} scope (optional) The scope (&lt;code&gt;this&lt;/code&gt; reference) in which the function is executed. Defaults to the current Component in the iteration.
 364      */
 365     each : function(fn, scope) {
 366         var comp;
 367         for (var id in this.list) {
 368             comp = this.list[id];
 369             if (comp.isComponent &amp;&amp; fn.call(scope || comp, comp) === false) {
 370                 return;
 371             }
 372         }
 373     },
 374
 375 <span id='Ext-ZIndexManager-method-eachBottomUp'>    /**
 376 </span>     * Executes the specified function once for every Component in this ZIndexManager, passing each
 377      * Component as the only parameter. Returning false from the function will stop the iteration.
 378      * The components are passed to the function starting at the bottom and proceeding to the top.
 379      * @param {Function} fn The function to execute for each item
 380      * @param {Object} scope (optional) The scope (&lt;code&gt;this&lt;/code&gt; reference) in which the function
 381      * is executed. Defaults to the current Component in the iteration.
 382      */
 383     eachBottomUp: function (fn, scope) {
 384         var comp,
 385             stack = this.zIndexStack,
 386             i, n;
 387
 388         for (i = 0, n = stack.length ; i &lt; n; i++) {
 389             comp = stack[i];
 390             if (comp.isComponent &amp;&amp; fn.call(scope || comp, comp) === false) {
 391                 return;
 392             }
 393         }
 394     },
 395
 396 <span id='Ext-ZIndexManager-method-eachTopDown'>    /**
 397 </span>     * Executes the specified function once for every Component in this ZIndexManager, passing each
 398      * Component as the only parameter. Returning false from the function will stop the iteration.
 399      * The components are passed to the function starting at the top and proceeding to the bottom.
 400      * @param {Function} fn The function to execute for each item
 401      * @param {Object} scope (optional) The scope (&lt;code&gt;this&lt;/code&gt; reference) in which the function
 402      * is executed. Defaults to the current Component in the iteration.
 403      */
 404     eachTopDown: function (fn, scope) {
 405         var comp,
 406             stack = this.zIndexStack,
 407             i;
 408
 409         for (i = stack.length ; i-- &gt; 0; ) {
 410             comp = stack[i];
 411             if (comp.isComponent &amp;&amp; fn.call(scope || comp, comp) === false) {
 412                 return;
 413             }
 414         }
 415     },
 416
 417     destroy: function() {
 418         delete this.zIndexStack;
 419         delete this.list;
 420         delete this.container;
 421         delete this.targetEl;
 422     }
 423 }, function() {
 424 <span id='Ext-WindowManager'>    /**
 425 </span>     * @class Ext.WindowManager
 426      * @extends Ext.ZIndexManager
 427      * &lt;p&gt;The default global floating Component group that is available automatically.&lt;/p&gt;
 428      * &lt;p&gt;This manages instances of floating Components which were rendered programatically without
 429      * being added to a {@link Ext.container.Container Container}, and for floating Components which were added into non-floating Containers.&lt;/p&gt;
 430      * &lt;p&gt;&lt;i&gt;Floating&lt;/i&gt; Containers create their own instance of ZIndexManager, and floating Components added at any depth below
 431      * there are managed by that ZIndexManager.&lt;/p&gt;
 432      * @singleton
 433      */
 434     Ext.WindowManager = Ext.WindowMgr = new this();
 435 });
 436 </pre>
 437 </body>
 438 </html>