InactivityMonitor Updated for 4.x

[schmoboy]

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

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
    messageBoxCountdown: 60, // how long should the messageBox wait (in seconds)?

    constructor: function(config) {
        this.mixins.observable.constructor.call(this, config);
        this.addEvents({timeout: true});

        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({params: params, url: this.pollUrl});
                },
                interval: this.pollInterval,
                scope: this
            });
            var body = Ext.get(document.body);
            body.on("click", this.resetTimeout, this);
            body.on("keypress", this.resetTimeout, this);
        }
    },

    destroy: function() {
        var body = Ext.get(document.body);
        body.un("click", this.resetTimeout, this);
        body.un("keypress", this.resetTimeout, this);
        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._beginCountdown, this);
        }
        this._inactivityTask.delay(this.inactivityTimeout);
    },

    // private stuff
    _pollTask: null, // task to poll server
    _countdownTask: null, // ONESECOND interval task for updating countdown MessageBox
    _countdownMessage: null, // countdown MessageBox
    _inactivityTask: null, // task to start countdown
    
    _beginCountdown: function () {
        var config = Ext.apply({
            buttons: Ext.MessageBox.YES,
            buttonText: { yes: 'Keep Working'},
            closable: false,
            draggable: false,
            fn: function (btn) {
                Ext.util.TaskManager.stop(this._countdownTask);
                this.resetTimeout();
            },
            msg: "Your session has been idle for too long.  Signing out...",
            progress: true,
            scope: this,
            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", this, win);
                } else {
                    win.updateProgress(win.seconds / this.messageBoxCountdown);
                }
            },
            scope: this,
            interval: 1000  // one second
        });
    }
}); 

Sample use in Ext.app.Application launch function...

    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(obj, win) {
                     // Send the user to logout url
                     // to close the session
                    window.location = "logout";
                }
            },
            pollUrl: "pingsession"
        });
    } 

[mitchellsimoens]

Nice update!