How do display a clock? Codes included.

[macno0b]

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:

http://img221.imageshack.us/img221/4127/sp3220080408144723kq2.jpg

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>',
'<span>{textchat}</span></p>',
'</div></tpl>'
);


//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()
})
]
});

panelChat.getBottomToolbar().mypanel=panelChat;

barTop = new Ext.Toolbar({
});

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


layoutNorth={
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

After

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


Add

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



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

To

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>',
'</tr></tbody></table>')
});
var btn = this.clockBtn;
this.setWidth(Ext.get('ux-clockbutton').getWidth());

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

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

}, this);

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

}, this);

function startTime()
{
Ext.getDom('ux-clockbutton-text').innerHTML = getstartTime();
updateClockTask.delay(500);
}

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

After

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

Add

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

In desktop.css

Add

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

[catacaustic]

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();
runner.start(task);

[macno0b]

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.

Thanks,

[catacaustic]

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>"
});

[macno0b]

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)

[esoteric]

macno0b, use CSS to position it where you want.

[macno0b]

macno0b, use CSS to position it where you want.

Thanks

[haloween]

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
}
Ext.TaskMgr.start(this.clock_updater);
}
,update: function()
{
this.setText(this.currTime())
}
});
Ext.reg('ux_clock', Ext.ux.Clock);
Nice n Clean :)

[koko2589]

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();

Ext.TaskMgr.start({
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' }, '->',
'-',{

[arunshocky]

I tried including the above clock which is rendered in mozilla firefox but not in IE..Please help me on the same...