Results 1 to 4 of 4

Thread: Ext.ux.window.Countdown

  1. #1
    Ext JS Premium Member danutungureanu.dgs's Avatar
    Join Date
    Oct 2008
    Posts
    22

    Default Ext.ux.window.Countdown

    This extension notifies user that he must take somme action, if not the default action is used after certain amount of seconds.

    Extension code:

    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):

    HTML Code:
    .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:

    HTML Code:
    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!
    Attached Images Attached Images
    Last edited by danutungureanu.dgs; 23 Jun 2009 at 3:56 AM. Reason: ie7 fix

  2. #2
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default

    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.

  3. #3
    Ext JS Premium Member danutungureanu.dgs's Avatar
    Join Date
    Oct 2008
    Posts
    22

    Default

    Thanks,

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

  4. #4
    Sencha User
    Join Date
    Oct 2016
    Posts
    4

    Default

    I have applied this code but I get nothing.

    Where am I supposed to put:

    var oWinExit = new Ext.ux.window.Countdown .....

    Right now I have it in function init() but I get nothing

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •