Threaded View

  1. #1
    Sencha User eirik.lorentsen's Avatar
    Join Date
    Aug 2011
    Location
    Santiago, Chile
    Posts
    33
    Vote Rating
    7
    eirik.lorentsen is on a distinguished road

      0  

    Default Ext.ux.util.AlwaysOnTop

    Ext.ux.util.AlwaysOnTop


    Always On Top extension for Ext JS 4.x

    I have created a 4.x controller adding alwaysOnTop feature to floating components.

    NOTE: I changed the name of the extension to Ext.ux.util.AlwaysOnTop to match the changes from version 1.0 to 1.1.

    The controller is quite simple and works by assigning a separate z-index manager for all floating components that have the property alwaysOnTop set to true.

    Demos and instructions can be found on this page:
    http://www.eirik.net/Ext/ux/util/AlwaysOnTop.html

    Or simply paste this code into a AlwaysOnTop.js file:
    PHP Code:
    /* 
     *    Always On Top extension for Ext JS 4.x
     *
     *    Copyright (c) 2011 Eirik Lorentsen (http://www.eirik.net/)
     *
     *    Examples and documentation at: http://www.eirik.net/Ext/ux/util/AlwaysOnTop.html
     *
     *    Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
     *    and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
     *
     *    Version: 1.1
     *    Last changed date: 2011-12-22
     */

    Ext.define('Ext.ux.util.AlwaysOnTop', {
        
    extend'Ext.app.Controller',

        
    alwaysOnTopManagernull,

        
    init: function() {
            
    this.control({
                
    'component{isFloating()}': {
                    
    'render': function (componentoptions) {
                        
    this.onComponentRender(componentoptions);
                    }
                }
            });
            
    /* Uncommenting the code below makes sure that all Ext.window.MessageBoxes stay on top. */
            /*
            Ext.override(Ext.window.MessageBox, {
                alwaysOnTop: true
            });
            */
            /* Uncommenting the code below makes sure that all form errormessages stay on top.
               Necessary if you have a form inside a alwaysOnTop window. */
            /*
            Ext.override(Ext.tip.ToolTip, {
                alwaysOnTop: true
            });
            */
        
    },

        
    onComponentRender: function (componentoptions) {
            if (
    component.alwaysOnTop) {
                if (!
    this.alwaysOnTopManager) {
                    
    this.alwaysOnTopManager Ext.create('Ext.ZIndexManager');
                }
                
    this.alwaysOnTopManager.register(component);
            }
            if (
    this.alwaysOnTopManager) {
                
    /* Making sure the alwaysOnTopManager always has the highest zseed */
                
    if (Ext.ZIndexManager.zBase this.alwaysOnTopManager.zseed) {
                    
    this.alwaysOnTopManager.zseed this.alwaysOnTopManager.getNextZSeed();
                }
            }
        }

    });


    /*    Changelog:
     *
     *    2011-09-01 - 1.1: Changed ComponentQuery from matching windows to all floating components. And renamed extension from Ext.ux.window.AlwaysOnTop to Ext.ux.util.AlwaysOnTop
     *
     */ 
    Last edited by eirik.lorentsen; 6 Mar 2012 at 11:49 AM. Reason: Updated title

Thread Participants: 2