Results 1 to 4 of 4

Thread: Using Ext.util.TaskRunner to display a clock or a timer in a load mask

  1. #1

    Default Answered: Using Ext.util.TaskRunner to display a clock or a timer in a load mask

    Using ExtJS 5.1.1.


    Couldn't really think of any other way to do this, but I need a timer to show in a load mask while awaiting an Ajax response. On 'success', I then would unset mask and destroy the timer.


    The code works fine without the 'Ext.util.TaskRunner', so my modification was to do the following:


    Code:
            task = runner.start({
                run:  function () {
                    // show loadMask during request
                    Ext.getBody().mask("Computing..." + Ext.Date.format(new Date(), 'g:i:s A'));
                },
                interval: 10
            });
    
    
            // payload for POST
            obj = {
                query: {
                    payload: atom
                }
            };
    
    
            Ext.Ajax.request({
                cors: true,
                timeout: 600000, //default is 30 seconds
                useDefaultXhrHeader: false,
                url: url,
                jsonData: obj,
                headers: {
                    'Accept': 'application/json'
                },
                disableCaching: false,
    
    
                success: function(response) {
                     // do stuff
    
    
                     // stop loadMask
                     Ext.getBody().unmask();
                     Ext.util.TaskRunner.destroy(task);
                }
            });
    On 'success' callback it is "doing stuff," but it is now not destroying the timer and now is it not removing the mask (this is confirmed, since I'm getting an error that:
    Code:
    TypeError: Ext.util.TaskRunner.destroy is not a function. (In `Ext.util.TaskRunner.destroy(task), 'Ext.util.TaskRunner.destroy' is undefined)
    ...


    I realize that the `TaskRunner` will continue to run until it's either destroyed or stopped, but this does not seem to be working as desired.


    I need ultimately to execute the task during the life cycle of the Ajax call, and I realize that I am calling the 'LoadMask' multiple times to achieve what I need.

    Got it, partially working by adding `repeat` config parameter and removing the destory/stop method:


    Code:
     task = runner.start({
                run:  function () {
                    // show loadMask during request
                    Ext.getBody().mask("Computing..." + Ext.Date.format(new Date(), 'g:i:s A'));
                },
                interval: 10,
                repeat: 1
            });

    However, the clock is not updating as desired, which makes sense, since the task only runs once. So, how can I get this to work as desired?

  2. Answer was in the docs:

    Code:
    task = runner.newTask({
                run:  function () {
                    // show loadMask during request
                    Ext.getBody().mask("Computing..." + Ext.Date.format(new Date(), 'g:i:s A'));
                },
                //repeat: 10,
                interval: 10
            });
    I was missing the 'newTask' method... then 'task.stop()' worked as expected.

  3. #2
    Sencha Premium Member
    Join Date
    Jun 2010
    Posts
    305
    Answers
    1

    Default

    try this

    window.setInterval(CheckIdleTime, 1000);

    var timeVal = arr[1];
    function CheckIdleTime() {
    _idleSecondsCounter++;


    if (_idleSecondsCounter >= IDLE_TIMEOUT || timeVal != SESS_TIMEOUT) {
    timeVal--;

    //console.log('timeVal' + timeVal);
    var minutes = parseInt( timeVal / 60 ) % 60;
    var seconds = timeVal % 60;
    //console.log(seconds.length);
    if (seconds.toString().length == 1) {
    seconds = '0'+seconds;
    }
    var formattedTime = minutes+' minute(s) '+seconds+' seconds';
    var msg = '<font color = "red" size:"12">'+formattedTime+'</font>. Would you like to continue?';
    Ext.MessageBox.confirm('Warning', msg , function(btn){
    if(btn === 'yes'){
    timeVal = arr[1];
    Ext.Ajax.request({
    url: '',
    method: 'POST',
    scope: this,
    success: function(response) {

    }
    });
    } else {

    }
    });
    }
    }

  4. #3

    Default

    Thanks, but I don't want to use a MsgBox. Everything should happen without needing to click on anything. I have the solution, which I will post below.

  5. #4

    Default

    Answer was in the docs:

    Code:
    task = runner.newTask({
                run:  function () {
                    // show loadMask during request
                    Ext.getBody().mask("Computing..." + Ext.Date.format(new Date(), 'g:i:s A'));
                },
                //repeat: 10,
                interval: 10
            });
    I was missing the 'newTask' method... then 'task.stop()' worked as expected.

Similar Threads

  1. SA3 : REQ: Ext.util.TaskRunner
    By EAHC-IT in forum Sencha Architect 3.x: Q&A
    Replies: 2
    Last Post: 27 Nov 2013, 7:04 AM
  2. Ext.util.TaskRunner problem
    By 8mauro9 in forum Ext: Discussion
    Replies: 1
    Last Post: 23 Oct 2012, 6:06 AM
  3. Ext.util.TaskRunner
    By Farshad in forum Ext 3.x: Bugs
    Replies: 1
    Last Post: 10 Mar 2012, 10:31 AM
  4. Creating a countdown / clock / timer.
    By pierrel in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 19 Apr 2011, 7:06 AM
  5. Ext.util.TaskRunner doubt
    By pongz79 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 15 Nov 2007, 8:33 AM

Tags for this Thread

Posting Permissions

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