Sorry for thread-hijacking.
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
I 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]
});
}