qqclient.js

EXT技术的一个小项目(附源码和数据库脚本).rar,分图书管理

/**
 * @author 宋英豪
 * @email [e-mail]
 * @description All rights reserved
 */
/**
 * @version 1.0
 */
Ext.BLANK_IMAGE_URL = './ext-2.2/resources/images/default/s.gif';
Ext.onReady(function() {
	Ext.QuickTips.init();
	var currentUser = document.forms[0].elements[0].value;
	/**
	 * @description 构建一个树形面板，用于显示在线用户等
	 */
	var Tree = Ext.tree;
	// 定义树的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 : '在线用户',
		border : true,
		rootVisible : false,
		lines : false,
		autoScroll : true,
		enableDD : false,
		animate : false
	});
	/**
	 * @method treeClick
	 * @private
	 * @description 添加‘单击事件’处理 当单击节点时，加载该节点的子节点
	 */
	var treeClick = function(node, e) {
		if (!node.isLeaf()) {
			treePanel.loader.dataUrl = 'http://localhost:8088/WebQQApp/treeProcess.do?NodeId='
					+ node.id;
		}
	}
	treePanel.on('beforeload', treeClick);
	/**
	 * @method treeDoubleClick
	 * @private
	 * @description 添加‘双击事件’处理 当双击节点时，弹出聊天对话框
	 */
	var treeDoubleClick = function(node, e) {
		if (node.text == currentUser||node.text=='登录用户') {
			return null;
		}
		new ExtFrame.ui.ChatWin(node.text, currentUser).init();
	}
	treePanel.on('dblclick', treeDoubleClick);
	/**
	 * @method expandAll
	 * @private
	 * @description 展开所有节点
	 */
	var expandAll = function() {
		treePanel.root.expand(true, false);
	}
	/**
	 * @method updateUserList
	 * @private
	 * @description 定时更新在线用户列表，刷新时间为10分钟
	 */
	var updateUserList = function() {
		treePanel.root.reload();
		treePanel.root.expand(true, false);
		setTimeout(updateUserList, 1000 * 60 * 10);
	}
	/**
	 * @method autoShowChatWin
	 * @private
	 * @description 当收到信息时，自动弹出聊天窗口
	 */
	var autoShowChatWin = function(msg) {
		var currentWin = Ext.getCmp(msg.fromUserName);
		if (currentWin != null) {
			return null;
		}
		new ExtFrame.ui.ChatWin(msg.fromUserName, currentUser).init();
	}
	/**
	 * @method loadMsg
	 * @private
	 * @description 定时从服务器端获取消息，刷新时间为3秒钟
	 */
	var loadMsg = function() {
		Ext.Ajax.request({
			url : 'http://localhost: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);
	}
	/**
	 * @method addMsg
	 * @private
	 * @description 把从服务器端获取的消息添加到相应的聊天窗口
	 */
	var addMsg = function(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);
	}
	/**
	 * @description 构建主窗体
	 */
	var topToolBar = new Ext.Toolbar({
		items : [{
					text : '刷新',
					tooltip : '刷新用户列表',
					handler:function(){
						updateUserList();
					}
				}, '-', {
					text : '帮助',
					tooltip : '帮助'
				}]
	});
	var qqClientWin = new Ext.Window({
		title : 'WebQQ' + '(' + currentUser + ')',
		collapsible : true,
		width : 220,
		height : 400,
		shim : false,
		animCollapse : false,
		constrainHeader : true,
		tbar : topToolBar,
		layout : 'accordion',
		border : false,
		layoutConfig : {
			animate : false
		},
		items : [treePanel, {
			title : '通讯录',
			html : '<p>待加功能</p>',
			autoScroll : true
		}, {
			title : '交流群',
			html : '<p>待加功能</p>'
		}]
	});
	expandAll();
	loadMsg();
	updateUserList();
    qqClientWin.show();
    setTimeout(function() {
				Ext.get('loading-mask').fadeOut({
					remove : true
				});
			}, 250);
});