Issue with Ext.util.DelayedTask!

[Shariar Shaikot]

Hello,

I tried to create a stopwatch with Sencha Touch 2.
I tried several way , but could not make it work.

After all I got Ext.util.DelayedTask ... but it was also not working.

My contrller

    
    Ext.define('MeetingCost.controller.Calculator', {
    extend: 'Ext.app.Controller',
    
    config: {
        refs: {
            calculator: 'calculator',
        },
        control: {
             'button[id=start]': {
                    tap: 'tapStart',
                    
                },
                'button[text=Stop]': {
                    tap: 'tapStoper'
                }
            }
            
        },
        
       tapStart: function()
       {
        
        var interval;
        
   clearInterval(interval);
        var sec = 0;
        var min = 0;
        var hour = 0;
  reDo = function ()
   {
    
   sec++;
   
  if (sec == 60) {
   sec = 0;
   min = min + 1; }
  else {
   min = min; }
  if (min == 60) {
   min = 0; 
   hour += 1; }
   if (sec<=9) { sec = "0" + sec; }
   var myhtml = ((hour<=9) ? "0"+hour : hour) + " : " + ((min<=9) ? "0" + min : min) + " : " + sec;
   
   
   
   Ext.getCmp('min').setHtml('<span>Time: '+myhtml+' </span><br/>');
   }
   



   /*start = function()
   {
    clearInterval(interval);
    if(!interval)
    {
    interval = setInterval(function() { reDo()}, 1000);   
   }
   }
   
    stop = function()
    {
        if(!interval)
        {
            Ext.Msg.alert('dot dot ....', 'ma ma msa');
        }
            clearInterval(interval);
            interval = null;
        
    }
    
    
    if(Ext.getCmp('start').getText() == 'Start')
    {
        start();
        Ext.getCmp('start').setText('Pause');
    }else{
        stop();
        Ext.getCmp('start').setText('Start');
    }
    */




    var task = Ext.create('Ext.util.DelayedTask', function() {
    reDo()
        });
        if(Ext.getCmp('start').getText() == 'Start')
    {
        task.delay(1000);
        
        Ext.getCmp('start').setText('Pause');
    }else{
        task.cancel();
        Ext.getCmp('start').setText('Start');
    }
       },
       tapStoper: function()
       {
        var indexPanel = Ext.create('MeetingCost.view.Stopwatch');
        Ext.getCmp('Viewport').setActiveItem(indexPanel, {
            reverse: false,
            type: 'slide',
            cover: false,
            duration: 500
        }); 
       } 
    
    });

With this code I got nothing to work as clock. Just show 00:00:01!!!


Please also provide me some examples of sencha stopwatch.
My client is getting anger so I need to fix it very badly.

Thanks in advance.

[mitchellsimoens]

DelayedTask will only fire once. You need to create a new DelayedTask each time the task fires off.

[Shariar Shaikot]

Really thanks and you are great.
Can you please explain , how to fire Ext.util.DelayedTask after every 1 sec?

[mitchellsimoens]

Little example;

var run = function (delay) {
    Ext.create('Ext.util.DelayedTask', function () {
        console.log('run');
        run(delay);
    }).delay(delay);
};

run(1000);

[Shariar Shaikot]

Many thanks, it was working.
But , how can I pause/cancel the interval?

Please give me a idea.

Thanks

[byu_risk3]

I don't know if you still need a solution, but look at the documentation for Ext.util.TaskManager (and also Ext.util.TaskRunner). There is code for a Stopwatch function.

This might be what you are looking for.

Here's a link - http://docs.sencha.com/ext-js/4-1/#!...il.TaskManager