Ext.ux.window.AlwaysOnTo

[eirik.lorentsen]

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:

/* 
 *    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',

    alwaysOnTopManager: null,

    init: function() {
        this.control({
            'component{isFloating()}': {
                'render': function (component, options) {
                    this.onComponentRender(component, options);
                }
            }
        });
        /* 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 (component, options) {
        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
 *
 */ 

[mitchellsimoens]

Why not do this for all floating components?

[eirik.lorentsen]

mitchellsimoens:
Good point! That was also my original idea. But i wasn't sure how to format the ComponentQuery to match all floating panels.

I looked further into it and I think this would be correct?
'panel{isFloating()}'

I was also having some doubts whether such a query would require a lot more resources?
Though it would probably be negligible if any difference at all?

[mitchellsimoens]

mitchellsimoens:
Good point! That was also my original idea. But i wasn't sure how to format the ComponentQuery to match all floating panels.

I looked further into it and I think this would be correct?
'panel{isFloating()}'

I was also having some doubts whether such a query would require a lot more resources?
Though it would probably be negligible if any difference at all?

Not just Panels but Components and Containers can be floating too.

'panel{isFloating()}' won't work but 'component[floating=true]' will. This will catch any component that is set to float.

[eirik.lorentsen]

Not just Panels but Components and Containers can be floating too.

'panel{isFloating()}' won't work but 'component[floating=true]' will. This will catch any component that is set to float.

I tried with 'component[floating=true]' and it worked on windows but didn't catch tooltips. Which are used for error messages in forms that may reside inside a alwaysOnTop window. So I used 'component{isFloating()}' instead. It works in all my test cases also on tooltips and does not throw any errors.

A new version 1.1 is published. I also renamed it to ux.util instead of ux.window to reflect the changes.

[hpsam]

Hello,

I'm building and application based on the Ext Desktop example. It's not an MVC application, no call to Ext.Application and no controller.

Can we do the same thing by overriding an Ext.Component or Ext.AbstractComponent method ? like render, onRender, afterRender.

Thanks

[hpsam]

If somebody have the same need, this code works on desktop Ext.onReady().
Change "MyApp" to your desktop App Namespace.

Ext.AbstractComponent.prototype.render = Ext.Function.createSequence(
    Ext.AbstractComponent.prototype.render,
    function() {
        var me = this;
        if (me.isFloating()) {
            if (me.alwaysOnTop) {
                if (!MyApp.alwaysOnTopManager) {
                    MyApp.alwaysOnTopManager = Ext.create('Ext.ZIndexManager');
                }
                MyApp.alwaysOnTopManager.register(me);
            }
            if (MyApp.alwaysOnTopManager) {
                // Making sure the alwaysOnTopManager always has the highest zseed
                if (Ext.ZIndexManager.zBase > MyApp.alwaysOnTopManager.zseed) {
                    MyApp.alwaysOnTopManager.zseed = MyApp.alwaysOnTopManager.getNextZSeed();
                }
            }
        }
    }
);
/* 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
});
*/