I am planning to add timer in my window which I Developed using ExtJS - extjs

Question

Ext.create('Ext.window.Window', {
title: 'Session Expired',
height: 200,
width: 400,
layout: 'fit',
items:[
{
xtype:'displayfield',
value:'Your Session will Expire in 5 minutes.Click Ok to continue your Session'
}
],
buttons: [
{
text: 'Ok',
handler: function(){Ext.Msg.alert('Your Session is Rest');}
},
{
text: 'Cancel',
handler: function(){Ext.Msg.alert('You have logged out');}
}
]
}).show();
Please help me to set the timer in the value of display field

Answer 1

You can use viewmodel to bind the value of displayfield and then update it using setInterval.
var countdownWindow = Ext.create('Ext.window.Window', {
title: 'Session Expired',
height: 200,
width: 400,
layout: 'fit',
viewModel: {
data: {
value: 'Your Session will Expire in 5 minutes.Click Ok to continue your Session'
}
},
items: [{
xtype: 'displayfield',
bind: {
value: '{value}'
}
}],
buttons: [{
text: 'Ok',
handler: function () {
Ext.Msg.alert('Your Session is Rest');
}
}, {
text: 'Cancel',
handler: function () {
Ext.Msg.alert('You have logged out');
}
}]
}).show();
minuteSecondTimer(4, 59, function(minute, sec) {
countdownWindow.getViewModel().setData({
value: `Your Session will Expire in ${minute} : ${sec} minutes.Click Ok to continue your Session`
})
}, this)
function minuteSecondTimer(minute, sec, callbackFn, callbackScope) {
var interval = setInterval(function () {
if (callbackFn) {
callbackFn.call(callbackScope, minute, sec);
}
if (sec == 0) {
sec = 60;
if (minute == 0) {
clearInterval(interval);
} else {
minute--;
}
}
sec--;
}, 1000);
}
I have created a fiddle for you to refer!
https://fiddle.sencha.com/#view/editor&fiddle/3lvu