Sencha TouchのDelayedTaskとsetTimeout

app_controller_WatchController1.js

Ext.define('Watch.controller.WatchController', {
    extend: 'Ext.app.Controller',
    requires: 'Ext.util.DelayedTask',
    config: {
        refs: {
            timeLabel: '#time_label',
            startButton: '#start_button',
            stopButton: '#stop_button'
        },
        control: {
            startButton:{
                tap: 'onStartClick'
            },
            stopButton:{
                tap: 'onStopClick'
            }
        },
        counter: 0,
        running: false
    },
    onStartClick: function(){
        if(this.getRunning()) return;
        this.setRunning(true);
        this.setCounter(0);
        this.count(this);
    },
    onStopClick: function(){
        if(!this.getRunning()) return;
        this.setRunning(false, this);
    },
    count: function(_this){
        if(!_this.getRunning()) return;
        var c = _this.getCounter();
        var min = c / 60 | 0;//整数化
        var sec = c % 60;
        _this.getTimeLabel().setHtml(min + ":" + sec);
        _this.setCounter(c + 1);
        
        setTimeout(_this.count, 1000, _this);
    }

});

app_controller_WatchController2.js

Ext.define('Watch.controller.WatchController', {
    extend: 'Ext.app.Controller',
    requires: 'Ext.util.DelayedTask',
    config: {
        refs: {
            timeLabel: '#time_label',
            startButton: '#start_button',
            stopButton: '#stop_button'
        },
        control: {
            startButton:{
                tap: 'onStartClick'
            },
            stopButton:{
                tap: 'onStopClick'
            }
        },
        counter: 0,
        running: false
    },
    onStartClick: function(){
        if(this.getRunning()) return;
        this.setRunning(true);
        this.setCounter(0);
        this.count();
    },
    onStopClick: function(){
        if(!this.getRunning()) return;
        this.setRunning(false, this);
    },
    count: function(){
        if(!this.getRunning()) return;
        var c = this.getCounter();
        var min = c / 60 | 0;//整数化
        if(min < 10) min = "0" + min;
        var sec = c % 60;
        if(sec < 10) sec = "0" + sec;
        this.getTimeLabel().setHtml(min + ":" + sec);
        this.setCounter(c + 1);

        var task = Ext.create('Ext.util.DelayedTask', this.count, this);
        task.delay(1000);
    }
});

app_view_Main.js

Ext.define("Watch.view.Main", {
    extend: 'Ext.tab.Panel',
    requires: [
        'Ext.TitleBar',
        'Ext.Label'
    ],
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                title: 'Timer',
                iconCls: 'time',

                styleHtmlContent: true,
                scrollable: true,

                items: [
                    {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Timer'
                    },
                    {
                        xtype: 'label',
                        id: 'time_label',
                        html: '00:00',
                        style: 'font-size: 50px'
                    },
                    {
                        xtype: 'button',
                        id: 'start_button',
                        text: 'Start'
                    },
                    {
                        xtype: 'button',
                        id: 'stop_button',
                        text: 'Stop'
                    }
                ]
            },
            {
                title: 'About',
                iconCls: 'action',

                items: {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'About'
                },
                html: [
                    'Counting Timer',
                    '@kis'
                ].join('<br/>')
            }
        ]
    }
});