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
    Vote Rating
    0
      0  

    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 - Ext JS Dev Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061
    Vote Rating
    19
      0  

    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
    Vote Rating
    0
      0  

    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
    Vote Rating
    -7
      1  

    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
  •