View Full Version : How do display a clock? Codes included.

8 Apr 2008, 12:31 PM
Hi all,

I am jut wondering if any of you guys know how to add a simple digital clock to this chat page like the below picture:


It might be something very easy to you but I havent quite figured out how to do that with extjs. Thanks for your helps

here is the code of the page:

var barMenu;
var barStatus;
var panelChat;
var storeChat;
var gridChat;

var barTop, barBottom;
var textBarBottom;

var viewport;
var layoutNorth, layoutSouth, layoutCenter, layoutEast;

function AppGo() {

var chatRecordType = [
{name: 'peopleid'},
{name: 'textchat'}

storeChat = new Ext.data.SimpleStore({
fields: chatRecordType,
data: [
['admin', 'Hello, welcome to chat room']

var resultTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="itemChat">',
'<p><span><b>{peopleid}: </b></span>',

//gridChat = new Ext.DataView({
gridChat = new Ext.app.ChatView({
id: 'chat-View',
tpl: resultTpl,
store: storeChat,
//width: 400,
height: 150,
itemSelector: 'div.itemChat'
// columns: [
// {id: 'peopleid', header: "ID", width:80, sortable: false, dataIndex: 'peopleid'},
// {header: "Chat Text", width: 195, sortable: false, dataindex: 'textchat'}
// ]

panelChat = new Ext.Panel({
id: 'panel-Chat',
title: 'Chat',
frame: true,
collapsible: true,
width: 230,
height: 300,
x: 500 ,
y: 50,
autoScroll: true,
items: gridChat,
bbar: [
'Chat: ', ' ',
new Ext.app.ChatField({
chatRecordFormat: chatRecordType,
store: storeChat,
//gridSM: gridChat.getSelectionModel()


barTop = new Ext.Toolbar({

barBottom = new Ext.Toolbar({
//height: 30,
//width: 1000,

region: 'north',
id: 'north-panel',
height: 30,
collabsible: false,
items: barTop

layoutSouth = {
region: 'south',
id: 'south-panel',
height: 30,
collabsible: false,
items: barBottom

layoutCenter = {
region: 'center',
id: 'center-panel',
layout: 'absolute',
items: panelChat

viewport = new Ext.Viewport({
layout: 'border',
items: [layoutNorth, layoutSouth, layoutCenter]


I found this code on a thread discussing about Extjs Javascript Desktop Clock. Not sure if it would be useful.

in TaskBar.js


this.qsPanel = new Ext.ux.QuickStartPanel({
el: 'ux-quickstart-panel',
id: 'TaskBarQuickStart',
minWidth: 60,
split: true,
width: 94


this.cklPanel = new Ext.ux.ClockPanel({
el: 'ux-taskclock-panel',
id: 'TaskBarClock',
minWidth: 30,
split: true,
width: 85

var panelWrap = new Ext.Container({
el: 'ux-taskbar-panel-wrap',
items: [this.qsPanel,this.tbPanel],
layout: 'border',
region: 'center'


var panelWrap = new Ext.Container({
el: 'ux-taskbar-panel-wrap',
items: [this.qsPanel,this.tbPanel,this.cklPanel],
layout: 'border',
region: 'center'

In end of file Add

* @class Ext.ux.ClockPanel
* @extends Ext.BoxComponent

Ext.ux.ClockPanel = Ext.extend(Ext.BoxComponent, {

initComponent : function(){

var time = getstartTime();
this.clockBtn = new Ext.Button({
text : time,
id: 'ux-clockbutton',
renderTo: 'ux-taskclock-panel',
template: new Ext.Template(
'<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
'<td class="ux-startbutton-left"><i>&#160;</i></td><td class="ux-startbutton-center"><em unselectable="on"><button class="x-btn-text" type="{1}" style="height:30px;" id="ux-clockbutton-text">{0}</button></em></td><td class="ux-startbutton-right"><i>&#160;</i></td>',
var btn = this.clockBtn;

var updateClockTask = new Ext.util.DelayedTask(startTime);

this.clockBtn.getEl().on('contextmenu', function(e){

}, this);

this.clockBtn.getEl().on('click', function(e){

}, this);

function startTime()
Ext.getDom('ux-clockbutton-text').innerHTML = getstartTime();

function getstartTime()
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
if(h<10)h = '0'+h;
if(m<10)m = '0'+m;
if(s<10)s = '0'+s;
return h+":"+m+":"+s;


In index.php


<div id="ux-taskbar-panel-wrap">
<div id="ux-quickstart-panel"></div>
<div id="ux-taskbuttons-panel"></div>


<div id="ux-taskclock-panel"></div>

In desktop.css


#ux-taskclock-panel {
background:transparent url(../images/default/taskbar/taskbar-start-panel-bg.gif) repeat-x left top;

8 Apr 2008, 3:17 PM
It's actually included in the docs... once you know where to look for it. ;)

Check out the 'Ext.util.TaskRunner' class. There's an example there of exactly what you're looking for.
// Start a simple clock task that updates a div once per second
var task = {
run: function(){
Ext.fly('clock').update(new Date().format('g:i:s A'));
interval: 1000 //1 second
var runner = new Ext.util.TaskRunner();

8 Apr 2008, 5:20 PM
Thanks a bunch. This forum needs more users like you.

I added the code in but it seems like the viewport overlaps and hides the clock. Where do I put
runner.start(task); so that the clock can be displayed as in the picture? Sorry for a dumb question but I am new to extjs.


8 Apr 2008, 11:56 PM
If you're using a viewport, you wouldn't have it set up as a DIV with an ID the way that the example does. You'll need to set the clock up as a panel and use that inside the viewport somewhere to display it. All you'd need to do there is add in the HTML as part of the panel config to a DIV tag, and update that.
var panel = new Ext.Panel ({
layout: "fit",
html: "<div id='clock'></div>"

9 Apr 2008, 10:29 AM
Thanksss. u r my savior/hero. :D

Got the clock up now, i couldn't find anything related to alignment in the panel from the docs. I want to move the clock to the right as in this photo. If it is convenient for you, could you spare sometime to help me?

http://img229.imageshack.us/img229/9641/sp3220080409132654oh0.jpg (http://imageshack.us)

9 Apr 2008, 11:03 AM
macno0b, use CSS to position it where you want.

14 Apr 2008, 8:23 AM
macno0b, use CSS to position it where you want.


18 Jun 2009, 12:17 AM
My Clock Button ...

Ext.ux.Clock = Ext.extend(Ext.Button,{
currTime: function(){return new Date().format('G:i:s')}
,initComponent:function() {
Ext.apply(this, {
text: this.currTime()
,cls: "x-btn-text-icon"
,icon: "clock.png" //Lick to a clock icon
Ext.ux.Clock.superclass.initComponent.apply(this, arguments);

this.clock_updater= {
run: this.update,
scope: this,
interval: 1000 //1 second
,update: function()
Ext.reg('ux_clock', Ext.ux.Clock);
Nice n Clean :)

18 Jun 2009, 12:25 AM
you can put clock on tbar

}, '-',
new Ext.Toolbar({
buttons: ['->', '', ''],
afterRender: function() {
Ext.Toolbar.prototype.afterRender.apply(this, arguments);
var timeEl = this.items.get(this.items.getCount() - 1).getEl();
var dateEl = this.items.get(this.items.getCount() - 2).getEl();

run: function() {
var d = new Date();
timeEl.innerHTML = d.format('G:i:s');
dateEl.innerHTML = d.format('m/d/Y');
interval: 1000



, {
tooltip: 'clock
onCls:'date' }, '->',

11 Feb 2010, 9:25 PM
I tried including the above clock which is rendered in mozilla firefox but not in IE..Please help me on the same...