Results 1 to 7 of 7

Thread: Timer / stopwatch

  1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    5

    Default Answered: Timer / stopwatch

    Hi folks,

    As I'm developing my first apps I would now like to implement something like a timer function.
    Three buttons; start, stop and reset, and when the user starts the timer it starts visually counting.
    something like this: http://www.timer-tab.com/

    H
    ow should I do this? My first idea was; set current time to localstorage key when pressed start, and then calculating the difference between current time and start time every second and displaying it.
    However I did not yet manage to update the time visually with something like setinterval.
    Can someone give me a simple example, pushing me in the right direction?

    Many thanks.
    Robbert

  2. Ext.extend doesn't create the App.IndexHome... it just creates a new class so if you are doing the setDiv() right after, it's not rendered so it won't be able to find it. You should do something more like this:

    Code:
    App.IndexHome = Ext.extend(Ext.Panel, {
        afterRender: function() {
            var me = this;
    
            me.setTime(5000);
    
            App.IndexHome.superclass.afterRender.call(me);
        },
    
        setTime: function(time) {
            this.update(time);
        }
    });
    Now you can do this:

    Code:
    var timer = new App.IndexHome();
    timer.setTime(10000);
    And you can have infinite amount of them instead of hardcoding an id on a div.

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,451
    Answers
    3997

    Default

    Simple functionality... Think you need to read up on setTimeout and setInterval http://www.elated.com/articles/javas...d-setinterval/

    If you want an example... http://www.hashemian.com/tools/javascript-countdown.htm
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    5

    Default

    Thanks for your reply and answer.

    I did manage to make a html file with what I want, but i'm now struggling with implementing it in a Sencha Touch application. How does getelementbyid work inside the sencha touch framework (innerhtml) ?

    If i try to set it with
    document.getElementById("time").innerHTML = 'Fred Flinstone';
    I'm getting error:
    Uncaught TypeError: Cannot set property 'innerHTML' of null

  5. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,451
    Answers
    3997

    Default

    You can use Ext.get('elId') instead of document.getElementById but it's saying that couldn't find you element.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  6. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    5

    Default

    So it is indeed not finding my div, any idea what is going on? I made a simple example:
    Code:
    var setDiv = function() {
        Ext.get('time').innerHTML = "new text";
    };
    
    
    App.IndexHome = Ext.extend(Ext.Panel, {
        html: '<h2><div id="time"></div></h2>',
    });
    
    Ext.reg('index-second', App.IndexHome);
    
    setDiv();

  7. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,451
    Answers
    3997

    Default

    Ext.extend doesn't create the App.IndexHome... it just creates a new class so if you are doing the setDiv() right after, it's not rendered so it won't be able to find it. You should do something more like this:

    Code:
    App.IndexHome = Ext.extend(Ext.Panel, {
        afterRender: function() {
            var me = this;
    
            me.setTime(5000);
    
            App.IndexHome.superclass.afterRender.call(me);
        },
    
        setTime: function(time) {
            this.update(time);
        }
    });
    Now you can do this:

    Code:
    var timer = new App.IndexHome();
    timer.setTime(10000);
    And you can have infinite amount of them instead of hardcoding an id on a div.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  8. #7
    Sencha User
    Join Date
    Sep 2011
    Posts
    5

    Default

    Thank you very much for clearing this up. I think I can sort it out now. thanks

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
  •