请求协助：为ExtJS窗口的displayfield添加倒计时计时器

要实现会话到期倒计时的实时显示，你可以借助ExtJS的Ext.TaskManager来定时更新displayfield的内容，同时处理按钮交互和倒计时结束后的逻辑。以下是修改后的完整代码：

Ext.create('Ext.window.Window', {
    title: 'Session Expired',
    height: 200,
    width: 400,
    layout: 'fit',
    // 定义倒计时总秒数（5分钟=300秒）
    remainingSeconds: 300,
    // 存储任务ID，用于后续清除
    countdownTask: null,
    items:[
        {
            xtype:'displayfield',
            itemId: 'countdownField',
            value: ''
        }
    ],
    buttons: [
        {
            text: 'Ok',
            handler: function(btn){
                var win = btn.up('window');
                // 清除倒计时任务
                Ext.TaskManager.stop(win.countdownTask);
                // 更新提示信息
                win.down('#countdownField').setValue('Your Session has been extended.');
                // 这里可添加重置会话的业务逻辑
                Ext.Msg.alert('Success', 'Your Session is Restored');
            }
        },
        {
            text: 'Cancel',
            handler: function(btn){
                var win = btn.up('window');
                // 清除倒计时任务
                Ext.TaskManager.stop(win.countdownTask);
                // 执行登出逻辑
                Ext.Msg.alert('Logged Out', 'You have logged out');
            }
        }
    ],
    // 窗口显示时启动倒计时
    listeners: {
        show: function(win){
            // 初始化显示初始倒计时
            win.updateCountdown();
            // 创建定时任务，每秒执行一次
            win.countdownTask = Ext.TaskManager.start({
                run: function(){
                    win.remainingSeconds--;
                    win.updateCountdown();
                    // 倒计时结束，自动触发登出
                    if(win.remainingSeconds <= 0){
                        Ext.TaskManager.stop(win.countdownTask);
                        Ext.Msg.alert('Logged Out', 'Your session has expired, you have been logged out');
                        win.close();
                    }
                },
                interval: 1000 // 每秒执行一次
            });
        },
        // 窗口关闭时清除任务，避免内存泄漏
        close: function(win){
            if(win.countdownTask){
                Ext.TaskManager.stop(win.countdownTask);
            }
        }
    },
    // 自定义方法：更新倒计时显示内容
    updateCountdown: function(){
        var minutes = Math.floor(this.remainingSeconds / 60);
        var seconds = this.remainingSeconds % 60;
        // 格式化秒数，确保两位数显示
        seconds = seconds < 10 ? '0' + seconds : seconds;
        this.down('#countdownField').setValue(`Your Session will Expire in ${minutes}:${seconds}. Click Ok to continue your Session`);
    }
}).show();

关键逻辑说明： #

• 用remainingSeconds存储剩余秒数，统一管理倒计时时长
• 通过Ext.TaskManager创建定时任务，每秒更新一次倒计时内容
• 新增updateCountdown方法封装时间格式化和字段更新逻辑，代码更易维护
• 按钮点击时立即停止任务，避免后续无效执行
• 倒计时结束后自动触发登出并关闭窗口
• 窗口关闭时清除任务，防止内存泄漏

内容的提问来源于stack exchange，提问作者Sasidhar Vatala