Ext自定义消息弹框 -- 闭包的应用

前几日改造了项目中用到的Ext的消息弹框的代码，将其封装为一个组件，并定义了新的可以自动消失的函数。编写该组件对自己深入理解JavaScript闭包的概念、尝试使用和解析Json格式的函数参数，以及动态改变HTML元素样式等新知识都很有帮助。

代码如下：

	/**
	 * @author NearEast 2012-05-28
	 * 可利用单例模式构建Ext自定义组件
	 * title: 消息框的标题，默认"警告"
	 * ctStyle: 消息框容器（弹框区域div）的样式，json格式，例如：{top:'5px',left:'5px'}； 默认宽度250，垂直位置为top，水平位置为right:5px
	 * */
	function CustomMsgBox(title, ctStyle, closeImageUrl) {
		if(undefined == title){
			title = "警告";
		}
		var width = null;
		if(undefined != ctStyle){
			if(typeof ctStyle != 'object'){
				alert('ctStyle format error:must be a json object');
				return;
			}else{
				width = ctStyle.width;
			}
		}
		if(undefined == width || typeof width != "number"){
			width = 250;
		}
		
		if(undefined == closeImageUrl || typeof closeImageUrl != "string"){
			closeImageUrl = '../examples/shared/icons/fam/cross.gif';
		}
		
		var msgCt;
		var idCnt=0;
/*		var name = /function\s+(.+?)\(/.exec(arguments.callee)[1];*/
		function createBox(text,id) {
			return [
					'<div id="' + id + '" class="CustomMsgBox">',
					'<div class="x-box-tl" ><div class="x-box-tr"><div class="x-box-tc" style="width:' + (width-15) + 'px"></div></div></div>',
					'<div class="x-box-ml" ><div class="x-box-mr"><div class="x-box-mc" style="width:' + (width-28) + 'px">',
					'<b style="font-size:medium;text-decoration:blink">' + title + '</b>',
					'<span class="msg-close" style="position:absolute;right:10px" onclick="cusMsgBoxClose(\'' + id + '\')">',
					'<img src="' + closeImageUrl + '"/></span>',
					'<h3 style="margin-top:5px;color:rgb(0,0,255)" >'+ text +'</h3>',
					'</div></div></div>',
					'<div class="x-box-bl""><div class="x-box-br"><div class="x-box-bc" style="width:' + (width-15) + 'px"></div></div></div>',
					'</div>' ].join('');
		}
		return {
			/**创建一个提示框
			* text: 提示的文本
			* id: 消息id；如果没有指定id，则自动生成
			*/
			msg : function(text, id) {
				if(undefined==id){
					var id = '_i_MB' + idCnt++;
				}
				
				if (!msgCt) {
					msgCt = Ext.DomHelper.insertFirst(
							document.body,{
								id : 'msg-div'+Math.random()*100,
								style : 'position:absolute;z-index:10001;bottom:5px;right:5px;width:' + width + 'px'
							}, true);
					
					if(undefined != ctStyle){
						for(var s in ctStyle){
							if (ctStyle.hasOwnProperty(s)) {
								msgCt.dom.style[s] = ctStyle[s];
							}
						}
					}
				}
				Ext.DomHelper.append(msgCt, {
					html : createBox(text, id)
				}, true);
			},
			/**创建一个提示框，如果用户没有关闭，则一定时间之后自动关闭
			 * delay: 显示的最大时长，默认为5秒
			 */
			tip: function(text, id, delay){
				if(undefined==delay || typeof delay != "number"){
					delay = 5000;
				}
				if(undefined==id){
					var id = '_i_MB' + idCnt++;
				}
				this.msg(text, id);
				setTimeout(function(){
					cusMsgBoxClose(id);
				}, delay);
			}
		};
	};
	
	function cusMsgBoxClose(id){
		var div = document.getElementById(id).parentNode;
		if (div) {
			div.style.display = 'none';
			div.parentNode.removeChild(div);
		}
	}

首先定义一个CustomMsgBox函数，函数的执行结果是返回一个闭包。该闭包有两个函数msg和tip，分别用于弹出一个固定的，或者显示一定时间自动关闭的消息提示框。为充分解耦，单独定义了一个cusMsgBoxClose函数，来对应弹框的关闭操作。也许还有更好的方法，可以将关闭操作也封装到闭包中，有空可以研究一下。

使用方法：

	Ext.onReady(function(){
		if(undefined === CustomMsgBox){
			alert('\tError:\nFile "customMsgBox.js" needed!');
			return;
		}
		Ext.ux.VehicleOfflineMsgBox = new CustomMsgBox('上下线提醒', {top:'5px',left:'5px'});

		Ext.ux.VehicleOfflineMsgBox.msg('<i>Text</i>');
		Ext.ux.VehicleOfflineMsgBox.tip('上线了',null,3000);
	});

效果如下图所示：