Results 1 to 2 of 2

Thread: InactivityMonitor Updated for 4.x

  1. #1
    Sencha Premium Member
    Join Date
    Oct 2009
    Posts
    23

    Default InactivityMonitor Updated for 4.x

    Updated the very nice InactivityMonitor from harley.333 as seen in this thread for ExtJS 4.x.

    PHP Code:
    Ext.define('Ext.ux.InactivityMonitor', {
        
    mixins: {
            
    observable'Ext.util.Observable'
        
    },
        
        
    requires: [
            
    'Ext.window.MessageBox',
            
    'Ext.util.*',
            
    'Ext.Ajax'
        
    ],
        
        
    ONEMINUTE: (1000 60),
        
        
    inactivityTimeout: (this.ONEMINUTE 5),  // Five minutes
        
    pollActionParam"a",
        
    pollAction"StayAlive",
        
    pollInterval: (this.ONEMINUTE 10),  // ten minutes
        
    pollUrl"pingsession",
        
    messageBoxConfig: {}, // allows developers to override the appearance of the messageBox
        
    messageBoxCountdown60// how long should the messageBox wait (in seconds)?

        
    constructor: function(config) {
            
    this.mixins.observable.constructor.call(thisconfig);
            
    this.addEvents({timeouttrue});

            if (
    this.inactivityTimeout >= this.ONEMINUTE) {
                
    this.resetTimeout();
                
    this._pollTask Ext.util.TaskManager.start({
                    
    run: function () {
                        var 
    params = {};
                        
    params[this.pollActionParam] = this.pollAction;
                        
    Ext.Ajax.request({paramsparamsurlthis.pollUrl});
                    },
                    
    intervalthis.pollInterval,
                    
    scopethis
                
    });
                var 
    body Ext.get(document.body);
                
    body.on("click"this.resetTimeoutthis);
                
    body.on("keypress"this.resetTimeoutthis);
            }
        },

        
    destroy: function() {
            var 
    body Ext.get(document.body);
            
    body.un("click"this.resetTimeoutthis);
            
    body.un("keypress"this.resetTimeoutthis);
            
    Ext.util.TaskManager.stop(this._pollTask);
            
    this._inactivityTask.cancel();
            
    Ext.util.TaskManager.stop(this._countdownTask);
        },

        
    resetTimeout: function () {
            if (!
    this._inactivityTask) {
                
    this._inactivityTask = new Ext.util.DelayedTask(this._beginCountdownthis);
            }
            
    this._inactivityTask.delay(this.inactivityTimeout);
        },

        
    // private stuff
        
    _pollTasknull// task to poll server
        
    _countdownTasknull// ONESECOND interval task for updating countdown MessageBox
        
    _countdownMessagenull// countdown MessageBox
        
    _inactivityTasknull// task to start countdown
        
        
    _beginCountdown: function () {
            var 
    config Ext.apply({
                
    buttonsExt.MessageBox.YES,
                
    buttonText: { yes'Keep Working'},
                
    closablefalse,
                
    draggablefalse,
                
    fn: function (btn) {
                    
    Ext.util.TaskManager.stop(this._countdownTask);
                    
    this.resetTimeout();
                },
                
    msg"Your session has been idle for too long.  Signing out...",
                
    progresstrue,
                
    scopethis,
                
    title"Inactivity Warning"
            
    }, this.messageBoxConfig);
            
            if (!
    this._countdownMessage) {
                
    // only create the MessageBox once
                
    this._countdownMessage Ext.Msg.show(config);
            }
            
            var 
    win this._countdownMessage;
            if (!
    win.isVisible()) {
                
    win.show(config);
            }
            
            
    win.updateProgress(0);
            
    win.seconds 0;
            
    this._countdownTask Ext.util.TaskManager.start({
                
    run: function () {
                    
    win.seconds += 1;
                    if (
    win.seconds this.messageBoxCountdown) {
                        
    Ext.util.TaskManager.stop(this._countdownTask);
                        
    this.fireEvent("timeout"thiswin);
                    } else {
                        
    win.updateProgress(win.seconds this.messageBoxCountdown);
                    }
                },
                
    scopethis,
                
    interval1000  // one second
            
    });
        }
    }); 
    Sample use in Ext.app.Application launch function...

    PHP Code:
        launch: function(profile)
        {
            
    // Start the inactivity monitor
            // log the user out after twenty minutes of inactivity
            
    this.inactivityMonitor Ext.create('Ext.ux.InactivityMonitor', {
                
    inactivityTimeout: (1000 60  20),  // 20 minutes
                
    listeners: {
                    
    timeout: function(objwin) {
                         
    // Send the user to logout url
                         // to close the session
                        
    window.location "logout";
                    }
                },
                
    pollUrl"pingsession"
            
    });
        } 

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Nice update!
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •