qqstart.js

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

/**
 * @author 宋英豪
 * @description QQ Client
 */
Ext.BLANK_IMAGE_URL = './ext-2.2/resources/images/default/s.gif'
Ext.onReady(function() {
	var currentUser = document.forms[0].elements[0].value;
	var Window = Ext.Window;
	var Tree = Ext.tree;
	Ext.QuickTips.init();
	/**
	 * 构建一个树面板，出现在主显示页面的左侧栏，用于导航 树的根节点为：rootNode 节点加载形式为异步加载
	 */
	// 定义节点的Loader,为Loader加上监视器
	// 防止在网络出现异常的时候，从后台提取不到数据
	var nodeLoader = new Tree.TreeLoader({
		listeners : {
			"loadexception" : function(loader, node, response) {
				node.loaded = false;
				node.reload.defer(10, node);
			}
		}
	});
	// 可以异步加载的根节点
	var root = new Tree.AsyncTreeNode({
		id : '0',
		text : '目录根节点'
	});

	// 开始构建树面板
	var treePanel = new Tree.TreePanel({

		root : root,
		loader : nodeLoader,
		deferredRender : false,
		title : '在线好友',
		split : true,
		border : true,
		rootVisible : false,
		lines : false,
		autoScroll : true,
		animCollapse : true,
		enableDD : false,
		animate : false
	});

	/**
	 * 为导航树添加单击事件，当单击某一节点（非叶节点）时，异步加载对应子节点
	 */

	function treeLoadClick(node, e) {

		if (!node.isLeaf()) {
			treePanel.loader.dataUrl = 'http://202.198.182.9:8088/WebQQApp/treeProcess.do?NodeId='
					+ node.id;
		}
	}
	treePanel.on('beforeload', treeLoadClick);

	var expand = function() {
		treePanel.root.reload();
		treePanel.root.expand(true,false);
		setTimeout(expand, 1000 *60*5);
	}
	/**
	 * 为树增加双击事件，当双击击某一节点时，弹出对话框
	 */
	function treeDoubleClick(node, e) {
		if (node.text == currentUser) {
			return null;
		}
		new ExtFrame.ui.ChatWin(node.text, currentUser).init();
	}
	treePanel.on('dblclick', treeDoubleClick);
	/**
	 * 获取服务器端的消息
	 */
	var loadMsg=function() {
		Ext.Ajax.request({
			url : 'http://202.198.182.9:8088/WebQQApp/getMsg.do',
			params : {
				toUserName : currentUser
			},
			success : function(response) {
				if (response.responseText != '') {
					var msg = eval('(' + response.responseText + ')');
					for (var i = 0; i < msg.jsonArr.length; i++) {
						autoShowChatWin(msg.jsonArr[i]);
						addMsg(msg.jsonArr[i]);
					}
				}
			}
		});
		setTimeout(loadMsg, 1000 * 3);
	}

	/**
	 * 自动弹出聊天窗口
	 */
	function autoShowChatWin(msg) {
		var currentWin = Ext.getCmp(msg.fromUserName);
		if (currentWin != null) {
			return null;
		}
		new ExtFrame.ui.ChatWin(msg.fromUserName, currentUser).init();
	}
	/**
	 * 显示消息
	 */

	function addMsg(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);
	}

	/**
	 * 构建主窗体
	 */
	var topTB = new Ext.Toolbar({
		items : [{
					text : '',
					tooltip : {
						title : '',
						text : ''
					}
				}, '-', {
					text : '添加',
					tooltip : '添加一个好友'
				}, '-', {
					text : '添加',
					tooltip : '添加一个好友'
				}]
	});
	var qqClientWin = new Window({
		// el : 'qq-win',
		title : 'WebQQ' + '(' + currentUser + ')',
		collapsible : true,
		width : 250,
		height : 400,
		shim : false,
		animCollapse : false,
		constrainHeader : true,
		tbar : topTB,
		layout : 'accordion',
		border : false,
		layoutConfig : {
			animate : false
		},
		items : [treePanel, {
			title : '通讯录',
			html : '<p>//ToDo</p>',
			autoScroll : true
		}, {
			title : '交流群',
			html : '<p>//ToDo</p>'
		}]

	});
	qqClientWin.show();
	loadMsg();
	expand();
});