Alright, there you go! It was an interesting task to learn how to override ext.net methods, I really learned a lot here. :) Didn't even know there was a desktop tag that could have a taskbar with a trayclock inside before your question.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="trayClock.aspx.cs" Inherits="ExtNetPlayground.trayClock" %>
<%@ Import Namespace="x=Ext.Net" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
// Fill these javascript values with the data from your clock source.
// If from code behind, you can just fill an hidden dateTime field and parse it here.
var yearnow = 2018,
monthnow = 11,
daynow = 23,
hoursnow = 15,
minsnow = 11,
secsnow = 43;
Ext.define('Ext.ux.desktop.TrayClock', {
override: 'Ext.ux.desktop.TrayClock',
updateTime: function () {
var me = this;
var addsecs = me.refreshInterval / 1000;
secsnow += addsecs;
while (secsnow >= 60) {
minsnow++;
secsnow -= 60;
}
while (minsnow >= 60) {
hoursnow++;
minsnow -= 60;
}
while (hoursnow >= 24) {
daysnow++;
hournow -= 24;
}
// Okay, I guess you got the idea, we are just updating the time client-side, to avoid much requests for your custom time. :)
// There are plenty of javascript samples that close to correctly increment time that you can find on google.
// Well and this is enough if you are just showing hour minute and second. :)
var time = Ext.Date.format(new Date(yearnow, monthnow, daynow, hoursnow, minsnow, secsnow, 0), me.timeFormat),
text = me.tpl.apply({ time: time });
if (me.lastText != text) {
me.setText(text); me.lastText = text;
}
me.timer = Ext.Function.defer(me.updateTime, me.refreshInterval, me);
}
});
</script>
<script runat="server">
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server" />
<ext:Desktop runat="server" ID="tbr1">
<TaskBar>
<TrayClock runat="server" ID="tck1" TimeFormat="H:i:s" RefreshInterval="1000" />
</TaskBar>
</ext:Desktop>
</div>
</form>
</body>
</html>
