View Full Version : Ext.ux.ActivityMonitor() - User Activity/Idle Monitoring

16 Nov 2011, 12:14 PM
I just created a GitHub repo for a common class I've had to use on a million different projects:
- https://github.com/arthurakay/ExtJS-Activity-Monitor

This should help anyone who needs to monitor how long a user has been idle/inactive. For example, many web applications need to automatically log a user out... the Ext.ux.ActivityMonitor() class handles most of that for you, with plenty of room for customization.

Thoughts and comments are welcome! :D

20 Nov 2011, 1:13 PM
Get that up on the App Gallery (http://www.sencha.com/apps/) son!

1 Dec 2011, 10:02 PM
Thank you for this extension!

I integrated it into my project today and it seems to be working beautifully so far. :D:D:D

2 Dec 2011, 3:48 AM
Awesome! I'm glad someone found this useful.

2 Dec 2011, 7:20 AM

9 Dec 2011, 10:15 AM
Just added this to the Sencha Market:
- http://market.sencha.com/addon/ext.ux.activitymonitor

9 Dec 2011, 12:59 PM
Probably will be using this in my current project.

25 May 2012, 9:04 AM
This is just what I was needing, thank you!!!

11 Sep 2012, 12:29 AM
Hey all,

I am using this in my Sencha application, however I have come across a problem when using an embedded iframe that actually no activity is being monitored when the user is clicking around on a flash document inside an embedded iframe.

Does anyone know a solution for this?

A workaround I have implemented for the moment is to disable Activity Monitor when they open the iframe and then enable it again when they close.

The only trouble with this is that the screen saver would not come on if they just left it on the iframe page.



11 Sep 2012, 4:48 AM
The issue there is that you have different documents and all user interactions go to the document within the iframe, not the top level document.

11 Sep 2012, 5:11 AM
The issue there is that you have different documents and all user interactions go to the document within the iframe, not the top level document.

Yeh I know, is there anyway that you can detect these interactions within the iframe?

11 Sep 2012, 6:03 AM
You should be able to access things using the iframe's "parent" variable:
- http://stackoverflow.com/questions/1301540/set-variable-in-parent-window-from-iframe

It will probably take some custom coding on your part... I didn't design the Activity Monitor for use cases like this. However, if you issue a working PR to the GitHub repo I'll certainly consider adding it!

As for the Flash interaction... I don't know if the ActivityMonitor will properly monitor interactions within the Flash plugin. Again, something I never thought to add/test.

12 Sep 2012, 1:21 AM
Thank you. Unfortuantely I don't have access to the files in the iframe so I wouldn't be able to implement the method on Stack Overflow.

I have opted for the method of when they open the iframe just to disable Activity Monitor and then enable it again once it has been closed.



25 Mar 2014, 6:43 AM
This has proven a great component. Thanks for sharing.

I've made a minor change to the code so that the mouse event being monitored can be configured.

For us, mousemove was a bit too overzealous, and we wanted it to be mousedown which covered our needs.

* @class Ext.ux.ActivityMonitor
* @author Arthur Kay (http://www.akawebdesign.com)
* @singleton
* @version 1.0
* GitHub Project: https://github.com/arthurakay/ExtJS-Activity-Monitor
Ext.define('Ext.ux.ActivityMonitor', {
singleton : true,

ui : null,
runner : null,
task : null,
lastActive : null,

ready : false,
verbose : false,
interval : (1000 * 60 * 1), //1 minute
maxInactive : (1000 * 60 * 30), //30 minutes
mouseEvent : 'mouseover',
secondsUntilInactive: 0,
secondsSinceLastActivity: 0,

init : function(config) {
if (!config) { config = {}; }

Ext.apply(this, config, {
runner : new Ext.util.TaskRunner(),
ui : Ext.getBody(),
task : {
run : this.monitorUI,
interval : config.interval || this.interval,
scope : this
this.secondsUntilInactive = this.maxInactive;

this.ready = true;

isReady : function() {
return this.ready;

isActive : Ext.emptyFn,
isInactive : Ext.emptyFn,

start : function() {
var me = this;

if (!me.isReady()) {
me.log('Please run ActivityMonitor.init()');
return false;
* we changed this from ousemove to mousedown
* to be less cpu consumming
me.ui.on(me.mouseEvent, me.captureActivity, me);
me.ui.on('keydown', me.captureActivity, me);

me.lastActive = new Date();
me.log('ActivityMonitor has been started.');

return true;

stop : function() {
var me = this;

if (!me.isReady()) {
me.log('Please run ActivityMonitor.init()');
return false;

me.lastActive = null;

me.ui.un(me.mouseEvent, me.captureActivity);
me.ui.un('keydown', me.captureActivity);

me.log('ActivityMonitor has been stopped.');
return true;

captureActivity : function(eventObj, el, eventOptions) {
this.lastActive = new Date();

monitorUI : function() {
var now = new Date(),
inactive = (now - this.lastActive);

this.secondsSinceLastActivity = (inactive / 1000).toFixed();
this.secondsUntilInactive = (this.maxInactive / 1000).toFixed() - this.secondsSinceLastActivity;
if (inactive >= this.maxInactive) {
this.stop(); //remove event listeners

else {
this.log('CURRENTLY INACTIVE FOR ' + inactive + ' (ms)');

log : function(msg) {
if (this.verbose) {


25 Mar 2014, 6:45 AM
Submit a PR to my GitHub repo... :D