1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Bangalore, India
    Posts
    175
    Answers
    4
    Vote Rating
    2
    renganathan is on a distinguished road

      0  

    Default Answered: Session Timeout Alert using PHP & Extjs4

    Answered: Session Timeout Alert using PHP & Extjs4


    Hi All,

    I want to show the alert message to the user that "SESSION GOT EXPIRED" , when user session is got expired.

    Can you guys guide me how to do that?

    How to get idle time in extjs?

    If somebody has already done, Please share the code.
    Thanks,

    RENGANATHAN M G

  2. I adapted this from an example I found in the user extensions forum, where I added the 60 second count-down timer and tweaked things to my liking. I always set the server-side session timeout value approximately 2 minutes greater than the maxInactive setting in this component, to allow for a little slop factor (Tomcat's session-timeout setting is not precise).

    Note that this class is a Singleton, so all you have to do is call MyApp.widgets.SessionTimer.start().

    Code:
    /**
     * Session Monitor task, alerts the user that their session will expire in 60 seconds and provides
     * the options to continue working or logout.  If the count-down timer expires,  the user is automatically
     * logged out.
     */
    Ext.define('MyApp.widgets.SessionMonitor', {
      singleton: true,
      interval: 1000 * 10,  // run every 10 seconds.
      lastActive: null,
      maxInactive: 1000 * 60 * 15,  // 15 minutes of inactivity allowed; set it to 1 for testing.
      remaining: 0,
      ui: Ext.getBody(),
    
      /**
       * Dialog to display expiration message and count-down timer.
       */
      window: Ext.create('Ext.window.Window', {
        bodyPadding: 5,
        closable: false,
        closeAction: 'hide',
        modal: true,
        resizable: false,
        title: 'Session Timeout Warning',
        width: 325,
        items: [{
          xtype: 'container',
          frame: true,
          html: "Your session will automatically expires after 15 minutes of  inactivity. If your session expires, any unsaved data will be lost and  you will be automatically logged out. </br></br>If you want  to continue working, click the 'Continue Working'  button.</br></br>"    
        },{
          xtype: 'label',
          text: ''
        }],
        buttons: [{
          text: 'Continue Working',
          handler: function() {
            Ext.TaskManager.stop(MyApp.widgets.SessionMonitor.countDownTask);
            MyApp.widgets.SessionMonitor.window.hide();
            MyApp.widgets.SessionMonitor.start();
            // 'poke' the server-side to update your session.
            Ext.Ajax.request({
              url: 'user/poke.action'
            });
          }
        },{
          text: 'Logout',
          action: 'logout',
          handler: function() {
            Ext.TaskManager.stop(MyApp.widgets.SessionMonitor.countDownTask);
            MyApp.widgets.SessionMonitor.window.hide();
            
            // find and invoke your app's "Logout" button.
            Ext.ComponentQuery.query('#buttonLogout')[0].handler();
          }
        }]
      }),
    
     
      /**
       * Sets up a timer task to monitor for mousemove/keydown events and
       * a count-down timer task to be used by the 60 second count-down dialog.
       */
      constructor: function(config) {
        var me = this;
       
        // session monitor task
        this.sessionTask = {
          run: me.monitorUI,
          interval: me.interval,
          scope: me
        };
    
        // session timeout task, displays a 60 second countdown
        // message alerting user that their session is about to expire.
        this.countDownTask = {
          run: me.countDown,
          interval: 1000,
          scope: me
        };
      },
     
     
      /**
       * Simple method to register with the mousemove and keydown events.
       */
      captureActivity : function(eventObj, el, eventOptions) {
        this.lastActive = new Date();
      },
    
    
      /**
       *  Monitors the UI to determine if you've exceeded the inactivity threshold.
       */
      monitorUI : function() {
        var now = new Date();
        var inactive = (now - this.lastActive);
            
        if (inactive >= this.maxInactive) {
          this.stop();
    
          this.window.show();
          this.remaining = 60;  // seconds remaining.
          Ext.TaskManager.start(this.countDownTask);
        }
      },
    
     
      /**
       * Starts the session timer task and registers mouse/keyboard activity event monitors.
       */
      start : function() {
        this.lastActive = new Date();
    
        this.ui.on('mousemove', this.captureActivity, this);
        this.ui.on('keydown', this.captureActivity, this);
            
        Ext.TaskManager.start(this.sessionTask);
      },
     
      /**
       * Stops the session timer task and unregisters the mouse/keyboard activity event monitors.
       */
      stop: function() {
        Ext.TaskManager.stop(this.sessionTask);
        this.ui.un('mousemove', this.captureActivity, this);  //  always wipe-up after yourself...
        this.ui.un('keydown', this.captureActivity, this);
      },
     
     
      /**
       * Countdown function updates the message label in the user dialog which displays
       * the seconds remaining prior to session expiration.  If the counter expires, you're logged out.
       */
      countDown: function() {
        this.window.down('label').update('Your session will expire in ' +  this.remaining + ' second' + ((this.remaining == 1) ? '.' : 's.') );
        
        --this.remaining;
    
        if (this.remaining < 0) {
          this.window.down('button[action="logout"]').handler();
        }
      }
     
    });

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,935
    Answers
    656
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You can setup an observable:

    // example code
    Code:
    Ext.util.Observable.observeClass(Ext.data.Connection);
    // connection handler, if server sends callback of expired session, logout!
    Ext.data.Connection.on('requestcomplete', function (conn, response, options) {
        var dResponse = Ext.util.JSON.decode(response.responseText);
        if (dResponse.success === false && dResponse.error === 'login') {
            Ext.Ajax.request({
                url: SITE_URL + 'logout_user',
                method: 'POST',
                success: function() {
                    window.location = SITE_URL;
                }
            });
        }
    });
    Regards,
    Scott.

  4. #3
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    I adapted this from an example I found in the user extensions forum, where I added the 60 second count-down timer and tweaked things to my liking. I always set the server-side session timeout value approximately 2 minutes greater than the maxInactive setting in this component, to allow for a little slop factor (Tomcat's session-timeout setting is not precise).

    Note that this class is a Singleton, so all you have to do is call MyApp.widgets.SessionTimer.start().

    Code:
    /**
     * Session Monitor task, alerts the user that their session will expire in 60 seconds and provides
     * the options to continue working or logout.  If the count-down timer expires,  the user is automatically
     * logged out.
     */
    Ext.define('MyApp.widgets.SessionMonitor', {
      singleton: true,
      interval: 1000 * 10,  // run every 10 seconds.
      lastActive: null,
      maxInactive: 1000 * 60 * 15,  // 15 minutes of inactivity allowed; set it to 1 for testing.
      remaining: 0,
      ui: Ext.getBody(),
    
      /**
       * Dialog to display expiration message and count-down timer.
       */
      window: Ext.create('Ext.window.Window', {
        bodyPadding: 5,
        closable: false,
        closeAction: 'hide',
        modal: true,
        resizable: false,
        title: 'Session Timeout Warning',
        width: 325,
        items: [{
          xtype: 'container',
          frame: true,
          html: "Your session will automatically expires after 15 minutes of  inactivity. If your session expires, any unsaved data will be lost and  you will be automatically logged out. </br></br>If you want  to continue working, click the 'Continue Working'  button.</br></br>"    
        },{
          xtype: 'label',
          text: ''
        }],
        buttons: [{
          text: 'Continue Working',
          handler: function() {
            Ext.TaskManager.stop(MyApp.widgets.SessionMonitor.countDownTask);
            MyApp.widgets.SessionMonitor.window.hide();
            MyApp.widgets.SessionMonitor.start();
            // 'poke' the server-side to update your session.
            Ext.Ajax.request({
              url: 'user/poke.action'
            });
          }
        },{
          text: 'Logout',
          action: 'logout',
          handler: function() {
            Ext.TaskManager.stop(MyApp.widgets.SessionMonitor.countDownTask);
            MyApp.widgets.SessionMonitor.window.hide();
            
            // find and invoke your app's "Logout" button.
            Ext.ComponentQuery.query('#buttonLogout')[0].handler();
          }
        }]
      }),
    
     
      /**
       * Sets up a timer task to monitor for mousemove/keydown events and
       * a count-down timer task to be used by the 60 second count-down dialog.
       */
      constructor: function(config) {
        var me = this;
       
        // session monitor task
        this.sessionTask = {
          run: me.monitorUI,
          interval: me.interval,
          scope: me
        };
    
        // session timeout task, displays a 60 second countdown
        // message alerting user that their session is about to expire.
        this.countDownTask = {
          run: me.countDown,
          interval: 1000,
          scope: me
        };
      },
     
     
      /**
       * Simple method to register with the mousemove and keydown events.
       */
      captureActivity : function(eventObj, el, eventOptions) {
        this.lastActive = new Date();
      },
    
    
      /**
       *  Monitors the UI to determine if you've exceeded the inactivity threshold.
       */
      monitorUI : function() {
        var now = new Date();
        var inactive = (now - this.lastActive);
            
        if (inactive >= this.maxInactive) {
          this.stop();
    
          this.window.show();
          this.remaining = 60;  // seconds remaining.
          Ext.TaskManager.start(this.countDownTask);
        }
      },
    
     
      /**
       * Starts the session timer task and registers mouse/keyboard activity event monitors.
       */
      start : function() {
        this.lastActive = new Date();
    
        this.ui.on('mousemove', this.captureActivity, this);
        this.ui.on('keydown', this.captureActivity, this);
            
        Ext.TaskManager.start(this.sessionTask);
      },
     
      /**
       * Stops the session timer task and unregisters the mouse/keyboard activity event monitors.
       */
      stop: function() {
        Ext.TaskManager.stop(this.sessionTask);
        this.ui.un('mousemove', this.captureActivity, this);  //  always wipe-up after yourself...
        this.ui.un('keydown', this.captureActivity, this);
      },
     
     
      /**
       * Countdown function updates the message label in the user dialog which displays
       * the seconds remaining prior to session expiration.  If the counter expires, you're logged out.
       */
      countDown: function() {
        this.window.down('label').update('Your session will expire in ' +  this.remaining + ' second' + ((this.remaining == 1) ? '.' : 's.') );
        
        --this.remaining;
    
        if (this.remaining < 0) {
          this.window.down('button[action="logout"]').handler();
        }
      }
     
    });

  5. #4
    Sencha User
    Join Date
    Jun 2011
    Location
    Bangalore, India
    Posts
    175
    Answers
    4
    Vote Rating
    2
    renganathan is on a distinguished road

      1  

    Default Session Timeout Alert using PHP & Extjs4

    Session Timeout Alert using PHP & Extjs4


    Thanks Guys for your prompt reply .

    i got simple solution in http://miamicoder.com/2011/the-art-o...ts-with-extjs/
    Thanks,

    RENGANATHAN M G

  6. #5
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    8
    Vote Rating
    2
    andyo is on a distinguished road

      0  

    Default


    RE: friend's post

    I know this is an old thread but I really like the way this was done and wanted to share my experience. I implemented this in 4.2.x MVC. After cmd compile I was getting "Uncaught TypeError: Cannot call method 'on' of null" referring to Ext.getBody(). Ext.getBody() is null when the singleton loads so I replaced "this.ui" with Ext.getBody() and it works fine after compile.

    There is probably a better way, but this works for me.