PDA

View Full Version : How to put a clock on a toolbar ?



Elfayer
5 Jul 2012, 6:39 AM
Hi,
I haven't found any answer enough precise to me.

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




// Start a simple clock task that updates a div once per second
var updateClock = function(){
Ext.fly (http://docs.sencha.com/ext-js/4-0/#!/api/Ext-method-fly)('clock').update(new Date().format('g:i:s A'));
}
var task = {
run: updateClock,
interval: 1000 //1 second
}
var runner = new Ext.util.TaskRunner (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.util.TaskRunner)();
runner.start(task);
// equivalent using TaskManager
Ext.TaskManager.start (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.TaskManager-method-start)({
run: updateClock,
interval: 1000
});


But i don't know where to put it.

redraid
5 Jul 2012, 10:02 AM
Add tbtext to toolbar and update in task

Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 500,
items: [
'->',
{
itemId: 'clock',
xtype: 'tbtext',
text: Ext.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'));
},
interval: 1000
});
}
}
});