1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    France
    Posts
    159
    Answers
    2
    Vote Rating
    3
    Elfayer is on a distinguished road

      0  

    Default Answered: How to put a clock on a toolbar ?

    Answered: How to put a clock on a toolbar ?


    Hi,
    I haven't found any answer enough precise to me.

    I've found that on the doc : (Ext.unit.TaskRunner)

    Code:
    // Start a simple clock task that updates a div once per second 
    var updateClock = function(){
         Ext.fly('clock').update(new Date().format('g:i:s A'));
     }
      var task = {
         run: updateClock,
         interval: 1000 //1 second
     } 
    var runner = new Ext.util.TaskRunner();
     runner.start(task);
      // equivalent using TaskManager
     Ext.TaskManager.start({
         run: updateClock,
         interval: 1000
     });
    But i don't know where to put it.

  2. Add tbtext to toolbar and update in task
    PHP Code:
    Ext.create('Ext.toolbar.Toolbar', {
        
    renderTodocument.body,
        
    width   500,
        
    items: [        
            
    '->'
            {
                
    itemId'clock',
                
    xtype'tbtext',
                
    textExt.Date.format(new Date(), 'g:i:s A')
            }
        ],
        
    listeners: {
            
    afterrender: function (tb) {
                var 
    clockCmp tb.down('#clock'),
                    
    task Ext.TaskManager.start({
                         
    run: function () {
                              
    clockCmp.setText(Ext.Date.format(new Date(), 'g:i:s A'));
                         },
                         
    interval1000
                   
    });                        
            }
        }
    }); 

  3. #2
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Answers
    44
    Vote Rating
    42
    redraid has a spectacular aura about redraid has a spectacular aura about redraid has a spectacular aura about

      1  

    Default


    Add tbtext to toolbar and update in task
    PHP Code:
    Ext.create('Ext.toolbar.Toolbar', {
        
    renderTodocument.body,
        
    width   500,
        
    items: [        
            
    '->'
            {
                
    itemId'clock',
                
    xtype'tbtext',
                
    textExt.Date.format(new Date(), 'g:i:s A')
            }
        ],
        
    listeners: {
            
    afterrender: function (tb) {
                var 
    clockCmp tb.down('#clock'),
                    
    task Ext.TaskManager.start({
                         
    run: function () {
                              
    clockCmp.setText(Ext.Date.format(new Date(), 'g:i:s A'));
                         },
                         
    interval1000
                   
    });                        
            }
        }
    }); 

Thread Participants: 1