1. #1
    Sencha User eirik.lorentsen's Avatar
    Join Date
    Aug 2011
    Location
    Santiago, Chile
    Posts
    33
    Vote Rating
    6
    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,672
    Vote Rating
    747
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Why not do this for all floating components?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

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

      0  

    Default


    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?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,672
    Vote Rating
    747
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by eirik.lorentsen View Post
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

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

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    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.

  6. #6
    Sencha User
    Join Date
    Nov 2011
    Location
    France
    Posts
    10
    Vote Rating
    0
    hpsam is on a distinguished road

      0  

    Question Use it without MVC

    Use it without MVC


    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

  7. #7
    Sencha User
    Join Date
    Nov 2011
    Location
    France
    Posts
    10
    Vote Rating
    0
    hpsam is on a distinguished road

      0  

    Default


    If somebody have the same need, this code works on desktop Ext.onReady().
    Change "MyApp" to your desktop App Namespace.
    PHP Code:
    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
    });
    */ 

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar