我计划在我的窗口中添加计时器,我用ExtJS开发

06odsfpq  于 2022-11-23  发布在  其他
关注(0)|答案(1)|浏览(149)
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();

请帮我在显示字段的值中设置计时器

lrl1mhuk

lrl1mhuk1#

可以使用viewmodel绑定displayfield的值,然后使用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);
}

我创造了一个小提琴给你参考!https://fiddle.sencha.com/#view/editor&fiddle/3lvu

相关问题