PDA

View Full Version : Ext.ux.window.Countdown



danutungureanu.dgs
22 Jun 2009, 5:25 AM
This extension notifies user that he must take somme action, if not the default action is used after certain amount of seconds.

Extension code:


/**
* Countdown window
*
* @author Dan Ungureanu
* @license Ext.ux.window.Countdown.js is licensed under the terms of the Open Source
*/
/*global Ext */

Ext.ns('Ext.ux.window');
Ext.ux.window.Countdown = Ext.extend(Ext.Window, {
version: '1.0',
width: 300,
actionText: 'User action in:<br />(seconds)',
messageText: '...',
iconCls: 'icon-cancel',
height: 160,
timeout: 30000,
closable: false,
closeAction: 'close',
plain: true,
layout: 'border',
modal: true,
resizable: false,
// {{{
initComponent: function() {
//console.log(this);
var oWin = this;
this.buttons= [];
this.buttons.push({
text: 'Yes',
scope: oWin,
handler: this.onYesClick
});
this.buttons.push({
text: 'No',
scope: oWin,
handler: this.onExpire
});
this.items = [{
xtype: 'panel',
region: 'center',
border: false,
baseCls: 'x-plain',
cls: 'x-countdown-text',
html: this.actionText
},{
xtype: 'panel',
region: 'east',
width: 100,
border: false,
baseCls: 'x-plain',
cls: 'x-number-countdown',
html: this.timeout/1000
},{
xtype: 'panel',
region: 'south',
height: 40,
border: true,
baseCls: 'x-plain',
style: 'padding: 0 8px',
html: this.messageText
}];

// call parent
Ext.ux.window.Countdown.superclass.initComponent.apply(this, arguments);

this.attachedTask = {
run: function(){
oWin.timeout = oWin.timeout-1000;
if(oWin.timeout<0){
oWin.onExpire();
return;
}
oWin.findByType('panel')[1].getEl().update(oWin.timeout/1000);
// not working in ie7 like this, so use line above instead
// oWin.findByType('panel')[1].getEl().dom.textContent = oWin.timeout/1000;
},
interval: 1000 //1 second
};

Ext.TaskMgr.start(this.attachedTask);
}, // eo function initComponent
// }}}

onYesClick: function(){
Ext.TaskMgr.stop(this.attachedTask);
this.close();
try{
this.onUserYes(this);
}catch(e){}
},

onExpire: function(){
Ext.TaskMgr.stop(this.attachedTask);
this.close();
try{
this.onUserNo(this);
}catch(e){}
},
// {{{
onRender: function() {
// call parent
Ext.ux.window.Countdown.superclass.onRender.apply(this, arguments);

} // eo function onRender
// }}}
});

Ext.reg('uxCountDown', Ext.ux.window.Countdown);


Custom css needed(style it as you wish):


.x-number-countdown {
font-weight: bold;
font-size: 42px;
text-align: center;
color: #CF2626;
}

.x-countdown-text {
font-weight: bold;
padding:8px 0 0 8px;
color: #15428B;
}

Usage example:


var oWinExit = new Ext.ux.window.Countdown({
title: 'You will be signed out',
actionText: 'Disconecting in:<br />(seconds)',
messageText: 'Do you want to save your data?',
onUserYes: function(win){
// here you can save data
},
onUserNo: function(win){
// do logout or something
}
}).show();

No support for localization.
And some screenshot attached, no live example available.
That's it, enjoy!

mschwartz
22 Jun 2009, 5:38 AM
Nice.

You might want to add a configuration for what onExpire() should do when the timer reaches 0. It could call onUserYes() or onUserNo() depending on the setting.

danutungureanu.dgs
22 Jun 2009, 5:49 AM
Thanks,

I'll keep that in mind for future version(with localization support, custom buttons and more).