test.js

用ExtJS做的一个网页聊天工具

/*
 * WebQQ
 */
Ext.onReady(function() {

	Ext.QuickTips.init();
	var win = new Ext.Window({
		el : 'qq-win',
		title : 'WebQQ',
		collapsible : true,
		width : 250,
		height : 400,
		iconCls : 'qq',
		shim : false,
		style : "margin-top:5px;margin-left:5px;",
		animCollapse : false,
		constrainHeader : true,

		tbar : [{
					text : '',
					tooltip : {
						title : '',
						text : ''
					},
					iconCls : 'connect'
				}, '-', {
					text : '添加',
					tooltip : '添加一个好友',
					iconCls : 'user-add'
				}, '-', {
					text : '删除',
					tooltip : '删除选中的好友',
					iconCls : 'user-delete'
				}],

		layout : 'accordion',
		border : false,
		layoutConfig : {
			animate : false
		},

		items : [new Ext.tree.TreePanel({
					id : 'im-tree',
					title : '在线网友',
					loader : new Ext.tree.TreeLoader(),
					rootVisible : false,
					lines : false,
					autoScroll : true,
					tools : [{
						id : 'refresh',
						on : {
							click : function() {
								var tree = Ext.getCmp('im-tree');
								tree.body.mask('Loading', 'x-mask-loading');
								tree.root.reload();
								tree.root.collapse(true, false);
								setTimeout(function() { // mimic a
											// server call
											tree.body.unmask();
											tree.root.expand(true, true);
										}, 1000);
							}
						}
					}],
					root : new Ext.tree.AsyncTreeNode({
						text : 'online',
						children : [{
							text : '我的好友',
							expanded : true,
							children : [{
										text : 'snail',
										iconCls : 'user',
										listeners : {
											'dblclick' : webQQDblClick
										},
										leaf : true
									}, {
										text : 'oo',
										iconCls : 'user',
										listeners : {
											'dblclick' : webQQDblClick
										},
										leaf : true
									}, {
										text : 'Jon',
										iconCls : 'user',
										listeners : {
											'dblclick' : webQQDblClick
										},
										leaf : true
									}, {
										text : 'Tim',
										iconCls : 'user',
										listeners : {
											'dblclick' : webQQDblClick
										},
										leaf : true
									}, {
										text : 'Nige',
										iconCls : 'user',
										listeners : {
											'dblclick' : webQQDblClick
										},
										leaf : true
									}, {
										text : 'Fred',
										iconCls : 'user',
										listeners : {
											'dblclick' : webQQDblClick
										},
										leaf : true
									}, {
										text : 'Bob',
										iconCls : 'user',
										listeners : {
											'dblclick' : webQQDblClick
										},
										leaf : true
									}]
						}]
					})
				}), {
					title : '通讯录',
					html : '<p>//ToDo</p>',
					autoScroll : true
				}, {
					title : '交流群',
					html : '<p>//ToDo</p>'
				}, {
					title : '我的设置',
					html : '<p>//ToDo</p>'
				}]
	});
	win.show(this);
	loadMessage();

	/*
	 * 聊天窗口
	 */
	function webQQDblClick(node, e) {
		var msgdialog = new Ext.Window({
			title : '和' + node.text + '聊天中',
			id : node.text,
			width : 550,
			height : 450,
			collapsible : true,
			labelAlign : 'right',
			labelWidth : 60,
			hideLabels : true,
			layout : 'fit',
			maximizable : true,
			style : "margin-top:5px;margin-left:5px;",
			bodyStyle : 'padding:5px;',
			frame : true,
			tbar : [{
						// text:'视频',
						tooltip : '视频聊天',
						iconCls : 'phgr'
					}, '-', {
						// text:'语音',
						tooltip : '语音聊天',
						iconCls : 'voice'
					}],
			items : [{
				layout : "table",
				layoutConfig : {
					columns : 2
				},
				defaults : {

				},
				width : 525,
				items : [{
							height : 200,
							items : [{
								xtype : "panel",
								id : "showmsg",
								autoScroll : true,
								width : 380,
								height : 200
							}]
						}, {
							height : 200,
							width : 142,
							xtype : "panel",
							html : '<img src="images/Ot.jpg" />',
							height : 200

						}, {
							height : 170,
							width : 382,
							items : [{
								xtype : "htmleditor",
								enableSourceEdit : false,
								enableAlignments : false,
								enableLists : false,
								enableLinks : false,
								id : "sendmsg",
								height : 240
							}]
						}, {
							height : 170,
							width : 142,
							items : [{
								xtype : "panel",
								html : '<img src="images/Me.jpg" />',
								height : 200
							}]
						}]
			}],
			buttons : [{
				text : '发送',
				handler : tt
			}, {
				text : '关闭',
				handler : function() {
					msgdialog.close();
				}
			}]

		});
		msgdialog.show();
		function tt(){
					var message = Ext.getCmp(node.text).findById("sendmsg")
							.getValue();
					var tousername = node.text;
					var fromusername = 'uname';

					// 将消息增加到消息显示框
					var sendDate = new Date().format("Y-m-d H:i:s");
					var dispMsgPanel = Ext.getCmp(node.text)
							.findById("showmsg");
					var formatmsg = "<div class='_msgtitle' style='color:blue'>"
							+ fromusername
							+ "  "
							+ sendDate
							+ "</div><div class='_msg'>" + message + "</div>";
							alert(formatmsg);
					dispMsgPanel.body.insertHtml("beforeEnd", formatmsg);
					dispMsgPanel.body.scroll("bottom", 9999);
                    
					// 清空发送消息框
					Ext.getCmp(node.text).findById("sendmsg").setValue("");

					// 发送消息至服务器端
					var conn = new Ext.data.Connection();
					conn.request({
						url : 'SendChatMessage.aspx',
						method : 'POST',
						params : {
							fromusername : fromusername,
							tousername : tousername,
							message : encodeURIComponent(message)
						},
						success : function(responseObject) {

						},
						failure : function(responseObject) {
							Ext.Msg.alert('失败', responseObject.statusText);
						}
					});

				}
	}

	/*
	 * 动态创建聊天窗口
	 */
	function autoshowQQWindow(msg) {
		var temp = Ext.getCmp(msg.fromusername);
		if (temp != null) {
			return;
		}
		var msgdialog = new Ext.Window({
			title : '和' + msg.fromusername + '聊天中',
			id : msg.fromusername,
			width : 550,
			height : 450,
			collapsible : true,
			labelAlign : 'right',
			labelWidth : 60,
			hideLabels : true,
			layout : 'fit',
			maximizable : true,
			style : "margin-top:5px;margin-left:5px;",
			bodyStyle : 'padding:5px;',
			frame : true,
			tbar : [{
						// text:'视频',
						tooltip : '视频聊天',
						iconCls : 'phgr'
					}, '-', {
						// text:'语音',
						tooltip : '语音聊天',
						iconCls : 'voice'
					}],
			items : [{
				layout : "table",
				layoutConfig : {
					columns : 2
				},
				defaults : {

				},
				width : 525,
				items : [{
							height : 200,
							items : [{
								xtype : "panel",
								id : "showmsg",
								autoScroll : true,
								width : 380,
								height : 200
							}]
						}, {
							height : 200,
							width : 142,
							items : [{
								xtype : "panel",
								html : '<img src="images/Ot.jpg" />',
								height : 200
							}]
						}, {
							height : 170,
							width : 382,
							items : [{
								xtype : "htmleditor",
								enableSourceEdit : false,
								enableAlignments : false,
								enableLists : false,
								enableLinks : false,
								id : "sendmsg",
								height : 240
							}]
						}, {
							height : 170,
							width : 142,
							items : [{
								xtype : "panel",
								html : '<img src="images/Me.jpg" />',
								height : 200
							}]
						}]
			}],
			buttons : [{
				text : '发送',
				handler : function() {
					var message = Ext.getCmp(msg.fromusername)
							.findById("sendmsg").getValue();
					var tousername = msg.fromusername;
					var fromusername = uname;

					// 将消息增加到消息显示框
					var sendDate = new Date().format("Y-m-d H:i:s");
					var dispMsgPanel = Ext.getCmp(msg.fromusername)
							.findById("showmsg");
					var formatmsg = "<div class='_msgtitle' style='color:blue'>"
							+ uname
							+ "  "
							+ sendDate
							+ "</div><div class='_msg'>" + message + "</div>";
					dispMsgPanel.body.insertHtml("beforeEnd", formatmsg);
					dispMsgPanel.body.scroll("bottom", 9999);

					// 清空发送消息框
					Ext.getCmp(msg.fromusername).findById("sendmsg")
							.setValue("");

					// 发送消息至服务器端
					var conn = new Ext.data.Connection();
					conn.request({
						url : 'SendChatMessage.aspx',
						method : 'POST',
						params : {
							fromusername : fromusername,
							tousername : tousername,
							message : encodeURIComponent(message)
						},
						success : function(responseObject) {

						},
						failure : function(responseObject) {
							Ext.Msg.alert('失败', responseObject.statusText);
						}
					});

				}
			}, {
				text : '关闭',
				handler : function() {
					msgdialog.close();
				}
			}]

		});
		msgdialog.show();
	}

	/*
	 * 获取消息
	 */
	function loadMessage() {

		Ext.Ajax.request({
			url : 'GetChatMessage.aspx?username=' + uname,
			success : function(response) {
				if (response.responseText != "") {
					var msg = Ext.decode(response.responseText);
					var messages = msg.Tables.Table.Rows;

					for (var i = 0; i < messages.length; i++) {
						autoshowQQWindow(messages[i]);
						addMessage(messages[i]);
					}
				}
			}
		});

		setTimeout("loadMessage();", 10000);
	}

	/*
	 * 显示消息
	 */
	function addMessage(msg) {
		var formatmsg = "<div class='_msgtitle' style='color:blue'>"
				+ msg.fromusername + "  " + msg.senddate
				+ "</div><div class='_msg'>" + decodeURIComponent(msg.message)
				+ "</div>";
		Ext.getCmp(msg.fromusername).findById("showmsg").body.insertHtml(
				"beforeEnd", formatmsg);
		Ext.getCmp(msg.fromusername).findById("showmsg").body.scroll("bottom",
				9999);
	}

});