1. #1
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234
    Vote Rating
    1
    DaveC426913 is on a distinguished road

      0  

    Wink updating a clock

    updating a clock


    Got a little hour/minute clock in the corner of my screen. I'd like to keep it updated.

    Is this what the delayedTask class is for? Or should I write my own setTimeout timer that starts when my component gets rendered, then calls itself regularly?

    Code:
     
    Concierge.DateTime = Ext.extend(Ext.Container, {
    
     initComponent: function() {
     
      var config = {
    ...
       listeners: {
        activate: this.updateTimer()
       }
            }
            Ext.apply(this, Ext.apply(this.initialConfig, config));
            Concierge.DateTime.superclass.initComponent.apply(this, arguments);
     },
     updateTimer: function (){
      console.log("tick...");
      setTimeout(this.updateTimer,1000);
     }
    });
    Ext.reg('concierge_datetime', Concierge.DateTime);

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,109
    Vote Rating
    503
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    DelayedTask isn't appropriate:

    The DelayedTask class provides a convenient way to "buffer" the execution of a method, performing setTimeout where a new timeout cancels the old timeout. When called, the task will wait the specified time period before executing. If durng that time period, the task is called again, the original call will be cancelled. This continues so that the function is only called a single time for each iteration.
    Just use setInterval:

    Code:
    var x = setInterval(function(){
    }, 1000);
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234
    Vote Rating
    1
    DaveC426913 is on a distinguished road

      0  

    Default


    Yeah, that's what I was thinking of.

    OK, I put it under the activate listener.
    Code:
       listeners: {
        activate: startTimer()
       }
     
    ...
     
      function startTimer(){
       setInterval(gettheTime,5000)
      }
    But I've got a problem with that activate listener. I want to ensure my gettheTime fires as soon as the page is ready. So I'll fire the gettheTime right away, then start the interval:
    Code:
      function startTimer(){
      gettheTime();
       setInterval(gettheTime,5000)
      }
    But I get an an error (Uncaught TypeError: Cannot set property 'innerHTML' of undefined) on this line:
    this.theTime.innerHTML = hour + ":" + minute + ap;

    My interpretation is that theTime does not exist yet. It is there by the time my interval has passed 5 seconds later. To me, this is telling me that activate is firing before the page is fully rendered. I've tried other events such as afterrender but no joy.

    Am I misusing the activate event?

    Here's the whole code:
    Code:
     
    Concierge.DateTime = Ext.extend(Ext.Container, {
     initComponent: function() {
     
      var config = {
       layout: 'hbox',
       items:[{
        id:  'theDate',
        width: 170,
        html:  gettheDate(),
       },{
        id:  'theTime',
        width: 90,
        html:''
       }],
       listeners: {
       activate: startTimer()
       }
            }
      Ext.apply(this, Ext.apply(this.initialConfig, config));
            Concierge.DateTime.superclass.initComponent.apply(this, arguments);
     function startTimer(){
      gettheTime();
      setInterval(gettheTime,5000)
     }
      
      function gettheDate(){
       months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
       days = ["Sun","Mon","Tue","Wed","Thur","Fri","Sat","Sun"];
       var now = new Date();
       var day = now.getDay();//day of week 0-6
       var month = now.getMonth();//month 0-11
       var date = now.getDate();//number
       return days[day] + ". " + months[month] + ". " +  date;
      };
     
      function gettheTime(){
       var now = new Date();
       var hour        = now.getHours();
       var minute      = ("0" + now.getMinutes());
       minute = minute.substring(minute.length-2,minute.length);//pad & trim
       var second      = ("0" + now.getSeconds());
       second =  second.substring(second.length-2,second.length);//pad & trim
       var ap = "am";
       if (hour   > 11) { ap = "pm";        }
       if (hour   > 12) { hour = hour - 12; }
       if (hour   == 0) { hour = 12;        }
     
      this.theTime.innerHTML = hour + ":" + minute + ap; 
       // to ensure it's working:
       // this.theTime.innerHTML = hour + ":" + minute + ":" + second +" "+ ap; 
      };
     },
     
    });
    Ext.reg('concierge_datetime', Concierge.DateTime);

  4. #4
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234
    Vote Rating
    1
    DaveC426913 is on a distinguished road

      0  

    Default


    Inexplicably, this works just fine:

    Code:
     
      function startTimer(){
       setTimeout(gettheTime,0);
       setInterval(gettheTime,5000)
      }
    whereas this does not:
    Code:
      function startTimer(){
       gettheTime();
       setInterval(gettheTime,5000)
      }

  5. #5
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234
    Vote Rating
    1
    DaveC426913 is on a distinguished road

      0  

    Default


    I've moved the listener to a constructor and changed it from activate (which doesn't work) to afterrender:

    Code:
     
     constructor:function(config) {
         config = config || {};
         config.listeners = config.listeners || {};
         Ext.applyIf(config.listeners, {
       afterrender: function(){ 
        setTimeout(this.updateTimer,0);
        setInterval(this.updateTimer,10000);
       }
         });
         Concierge.DateTime.superclass.constructor.call(this, config);
     },

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,109
    Vote Rating
    503
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    The reason why it didn't work with activate is because you weren't passing a function reference:

    This passes the RESULT of startTimer to the activate listener. The listeners expect a function reference.
    Code:
    // bad
    activate: startTimer()
    // good
    activate: startTimer
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #7
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234
    Vote Rating
    1
    DaveC426913 is on a distinguished road

      0  

    Default


    Cool. Thanks.

Similar Threads

  1. Clock for 2.0 Desktop
    By gsylvain35 in forum Community Discussion
    Replies: 25
    Last Post: 25 Apr 2011, 4:44 AM
  2. Clock ?
    By lenoil in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 24 Sep 2008, 7:25 AM
  3. About the clock
    By Capi666 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 1 Jul 2008, 11:40 PM
  4. Question about a clock...
    By creep in forum Community Discussion
    Replies: 2
    Last Post: 16 Apr 2008, 6:12 AM
  5. simple clock help
    By rudi06121972 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 8 Apr 2008, 3:18 PM

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar