记要：extjs4.0学习1 _JavaScript

记录：extjs4.0学习1
进行测试的jsp文件：
<%@ page language="java" contentType="text/html; charset=gb2312"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>ExtJS的MessageBox测试</title>
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/script/ext4.0/resources/css/ext-all.css" />
	<script type = "text/javascript"  src="<%=request.getContextPath()%>/script/ext4.0/ext-all.js" ></script>
	<script type = "text/javascript"  src="<%=request.getContextPath()%>/script/ext4.0/local/ext-lang-zh_CN.js" > </script>
	<!-- Ext的MessageBox和Msg都是指向Ext.window.MessageBox. 这些都不是阻塞的。 -->
	<script language="javascript">
		Ext.onReady(function(){
			Ext.Msg.msgButtons[0].setText("好");//OK
			Ext.Msg.msgButtons[1].setText("是");//YES
			Ext.Msg.msgButtons[2].setText("否");//NO
			Ext.Msg.msgButtons[3].setText("取消");//CANCEL
			
			
			Ext.MessageBox.alert("alert提示框",'<font color=red>支持html格式文本',callBackForAlert);
		});

		function callBackForAlert(id){
			alert("alert信息框的call back, id="+id);
			Ext.MessageBox.confirm("confirm提示框","测试",callBackForConfirm);
		}
		
		function callBackForConfirm(id){
			alert("confirm提示框所选id是："+id);
			Ext.MessageBox.prompt("prompt提示框",'请输入提示',callBackForPrompt,this,true,'默认值');
		}

		function callBackForPrompt(id,msg){
			alert("你的选择是："+id+", 你的输入是："+msg);

			alert("以下是自定义提示框：");

			Ext.Msg.show({
				title:'自定义提示',
				msg:'提示的内容',
				width:300,
				height:300,
				modal:true,
				prompt:true,
				multiline:true,
				value:'请输入',
				buttons:Ext.Msg.OKCANCEL,
				fn:callBackForShow,
				icon:Ext.Msg.QUESTION
				
			});
		}
		var msgbox;
		function callBackForShow(id,msg){
			alert("你的选择是："+id+", 你的输入是："+msg);

			msgbox = Ext.Msg.alert("时钟","开始", callBackForThreadStop);
			task ={
					run:function(){
					//以下用来更新MessageBox的显示内容
						msgbox.updateText("当前时间："+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));
					},
					interval:1000
				};
			Ext.TaskManager.start(task);//启动定时任务
		}
		//这个是Ext的定时任务线程
		var task;

		//用来停止线程
		var count = 0;//刷新次数
		var percentage = 0;//百分比
		function callBackForThreadStop(){
			Ext.TaskManager.stop(task);

			//以下测试进度条窗口
			//Ext.Msg.wait("进度","进度条窗口"); 这个默认没有modal功能
			msgbox=Ext.Msg.show({
				title:'进度条',
				msg:'正在解压。。。',
				width:300,
				height:300,
				modal:true,
				progress:true,
				closable:false,
				buttons:Ext.Msg.CANCEL,
				fn:cancelProgress
			});
			task ={
					run:function(){
						count++;
						percentage = count/10;
						progressText = "进度："+percentage*100+"%";
						msgbox.updateProgress(percentage,progressText,"当前时间："+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));

						if(count>=10){
							Ext.TaskManager.stop(task);
							msgbox.hide();
							alert("任务完成！");
							
						}
					},
					interval:1000
				};
			Ext.TaskManager.start(task);//启动定时任务
		}

		function cancelProgress(id){
			if(id=='cancel'){
				Ext.TaskManager.stop(task);
				msgbox.hide();
				alert("任务取消！");
			}else{
				alert(id);
			}
		}
		
	</script>
</head>
<body>
	<h1>ExtJS的MessageBox测试</h1>
	
</body>
</html>