博客

(7)Extjs4.2 MessageBox的三种用法和 进度条

  • Post author:
  • Post category:其他


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>示例-6(002)：MessageBox的三种用法和 进度条</title>
	
	
    <link rel="stylesheet" type="text/css" href="../js/ext4.2/resources/css/ext-all.css"/>    
    <script type="text/javascript" src="../js/ext4.2/bootstrap.js"></script>
    <script type="text/javascript" src="../js/ext4.2/locale/ext-lang-zh_CN.js"></script>
   
   
    <script type="text/javascript">
    	//★Ext.onReady在DOM模型加载完毕就会执行
    	Ext.onReady(function(){
   		 
    		/* ★Ext.MessageBox.alert() 
    		            这个方法用来打开一个普通的对话框，对话框中只显示一个确定按钮。
    			第一个参数为标题栏
    			第二个参数为内容
    			第三个参数为提示框关闭时 的 回调函数
    			
    			Ext.get("xxx") 返回类型 Ext.dom.Element
    		*/
    		var btn1 = Ext.get("btn1");//获取id为bt1的按钮对象
    		btn1.on("click",function(){//为bt1绑定click事件
    			
    			//title  content  callback(点击确定按钮  x关闭  都会触发回调函数)
    			Ext.Msg.alert("提示1", "按钮1被点击Ext.MessageBox.alert()",function(btn){
    					alert(btn); //确定  -- ok   x -- cancle
    					
    			});
    		});
    		
    		
    		/* ★Ext.MessageBox.confirm() 
    		             这个方法将打开一个包含yes/no按钮的对话框，通常用来提示用户是否要执行敏感操作
    		             （例如删除数据等，需要用户再次确认，防止误操作）
    		*/
    		var btn2 = Ext.get("btn2");//获取id为bt1的按钮对象
    		btn2.on("click",function(){
    			
    			Ext.Msg.confirm("提示2", "按钮2被点击Ext.MessageBox.confirm()",function(btnId){
    				
    				alert(btnId); //是 -- yes 否--no  x--cancle
   				    if (btnId == "yes") {
   			            alert("点击了yes按钮");
   			        }
   			        else if (btnId == "no") {
   			            alert("点击了no按钮");
   			        }
   			        else {
   			            alert("没有点击按钮，关闭了提示框");
   			        }
    			});
    			
    		});
    		
    		/* ★Ext.MessageBox.prompt() 
    		
    		第三个参数window是默认的作用域
			第四个参数是否为多行输入框，传入true就表示可以输入多行文字|直接数字  就是文本框显示几行
			第五个参数是文本输入框的默认值
    		*/
    		var btn3 = Ext.get("btn3");//获取id为bt1的按钮对象
    		btn3.on("click",function(){
    			
    			Ext.Msg.prompt("提示3","按钮3被点击Ext.MessageBox.prompt()",function(btnId,text){
    				
    				alert(btnId+"----"+text);//确定---ok 取消--cancle  x--cancle
    				if (btnId == "ok") {
   			            alert("文本框内容"+text);
   			         }
   			        else {
   			            alert("点击了取消按钮");
   			            alert("文本框内容"+text);
   			        }
    			},this,5,"~~~~~~");
    		});
		
    		
    		/* ★静
    		  Ext.MessageBox.progress
    		      显示一个带有进度条的对话框，这个方法有三个参数：
			       第一个参数是标题
			       第二个参数是内容
			       第三个参数是进度条显示的文字
    		*/
    		
    		var btn4 = Ext.get("btn4");//获取id为bt1的按钮对象
    		btn4.on("click",function(){
    			
    			Ext.Msg.progress("提示4","按钮4被点击Ext.Msg.progress","0%");
    			
    		});
    		
    	
    		/* ★动态进度
  		  		Ext.MessageBox.progress
  		 在段代码中，我首先定义了一个updateProgress的方法，在这个方法中，判断如果参数progress大于等于1，
  		 说明已经完成了，那么调用Ext.MessageBox.updateProgress方法来更新进度。

  		 Ext.MessageBox.updateProgress方法接收两个参数：

  		  第一个参数为进度数值，值的范围在0到1之间。
  		  第二个参数为进度条显示的文字
  		  在updateProgress方法中，我使用了Ext.defer方法来执行定时的操作。

  		 Ext.defer 有两个参数：
  		  第一个参数为定时完成以后执行的方法
  		  第二个参数为时间长度
  		  我在定时代码中执行了updateProgress方法本身，在进度上加0.1，用来继续更新进度。
  		  	*/
  		  	
  		   var updateProgress = function (progress) {
  		      if (progress >= 1) {
  		          Ext.MessageBox.updateProgress(1, "处理完成");
  		          Ext.defer(function () { Ext.MessageBox.close(); }, 1000);
  		          return;
  		      }
  		      Ext.MessageBox.updateProgress(progress, Math.round(progress * 100) + "%");
  		      Ext.defer(function () {
  		          updateProgress(progress + 0.1);
  		      }, 500);
  		  }
   			var btn5 = Ext.get("btn5");//获取id为bt1的按钮对象
   			btn5.on("click",function(){
   			
	   			Ext.Msg.progress("提示5","按钮5被点击动态Ext.Msg.progress","0%");
	   		    updateProgress(0);
   			});
   	});
    </script>
</head>
<body>
	<br/><br/>
	<input type="button" id="btn1" value="按钮1（Ext.Msg.alert）" /><br/><br/>
	<input type="button" id="btn2" value="按钮2（Ext.Msg.confirm）" /><br/><br/>
	<input type="button" id="btn3" value="按钮3（Ext.Msg.prompt）" /><br/><br/><hr /><br/>
	<input type="button" id="btn4" value="按钮4（静态Ext.Msg.progress）" /><br/><br/>
	<input type="button" id="btn5" value="按钮5（动态Ext.Msg.progress）" /><br/><br/>
</body>
</html>


————————————————————————————————————

转自


http://www.qeefee.com/article/extjs-100-examples-002-messagebox


MessageBox的三种用法


http://www.qeefee.com/article/extjs-100-examples-003-messagebox-with-progressbar


进度条对话框Ext.MessageBox.progress

ExtJS中常用的三种MessageBox。

Ext.MessageBox.alert()

这个方法用来打开一个普通的对话框，对话框中只显示一个确定按钮。 

Ext.get("btn1").on("click", function () {
    Ext.MessageBox.alert("提示", "按钮被点击");
});
  • 第一个参数为标题栏
  • 第二个参数为内容

效果如下图【

查看在线示例

】：

image

Ext.MessageBox.confirm()

这个方法将打开一个包含yes/no按钮的对话框，通常用来提示用户是否要执行敏感操作（例如删除数据等，需要用户再次确认，防止误操作） 

Ext.get("btn2").on("click", function () {
    Ext.MessageBox.confirm("提示", "是否要跳转页面？", function (btnId) {
        if (btnId == "yes") {
            alert("点击了yes按钮");
        }
        else if (btnId == "no") {
            alert("点击了no按钮");
        }
        else {
            alert("没有点击按钮，关闭了提示框");
        }
    });
});

这个方法的回调函数包含了btnId参数，参数值可以是yes或no。

效果如下图

【


查看在线示例


】


：

image

Ext.MessageBox.prompt()

接下来是第三种对话框，这中对话框中包含一个输入框和ok/cancel按钮。在回调函数中我们可以处理用户的输入，回调函数中包含了btnId和text两个可用的参数，示例代码如下： 

Ext.get("btn3").on("click", function () {
    Ext.MessageBox.prompt("提示", "请输入用户名", function (btnId, text) {
        if (btnId == "ok") {
            alert(text);
        }
        else {
            alert("点击了取消按钮");
        }
    });
});

在用户输入了文字并点击确定按钮以后，我们将会弹出对话框。


【


查看在线示例


】

image

另外，这个方法还允许创建一个

多行的输入框

，代码如下： 

Ext.MessageBox.prompt("提示", "请输入用户名", function (btnId, text) {
    if (btnId == "ok") {
        alert(text);
    }
    else {
        alert("点击了取消按钮");
    }
}, window, true);

第三个参数window是默认的作用域

第四个参数是否为多行输入框，传入true就表示可以输入多行文字

运行效果如下

【


查看在线示例


】


：

image

最后一个功能是，如果我们需要在打开的时候显示一段

默认文字

，我们可以传入第五个参数，代码如下： 

Ext.MessageBox.prompt("提示", "请输入用户名", function (btnId, text) {
    if (btnId == "ok") {
        alert(text);
    }
    else {
        alert("点击了取消按钮");
    }
}, window, true, "这是默认文字");

运行效果如下

【


查看在线示例


】


：

image

OK，常用的三种对话框已经完成了。


————————————————————————————————————

在上一篇内容中我们介绍了

三种常用的MessageBox提示框

，在这篇文章中，我们将演示如何在对话框中使用进度条。

进度条对话框

我们可以使用下面的代码来在MessageBox中显示一个进度条： 

Ext.get("btn4").on("click", function () {
    Ext.MessageBox.progress("进度", "正在处理，请稍候...", "0%");
});

在上面的代码中，我们使用Ext.MessageBox.progress方法显示一个带有进度条的对话框，这个方法有三个参数：

  • 第一个参数是标题
  • 第二个参数是内容
  • 第三个参数是进度条显示的文字

运行代码可以看到如下界面

【


查看在线示例


】


：

image

让进度条动起来

上面的代码只是在MessageBox中显示了一个进度条，并没有为进度条更新进度，接下来我们来更新进度状态，让进度条能够动起来。 

var updateProgress = function (progress) {
    if (progress >= 1) {
        Ext.MessageBox.updateProgress(1, "处理完成");
        return;
    }

    Ext.MessageBox.updateProgress(progress, Math.round(progress * 100) + "%");
    Ext.defer(function () {
        updateProgress(progress + 0.1);
    }, 500);
}

在段代码中，我首先定义了一个updateProgress的方法，在这个方法中，判断如果参数progress大于等于1，说明已经完成了，那么调用Ext.MessageBox.updateProgress方法来更新进度。

Ext.MessageBox.updateProgress方法接收两个参数：

  • 第一个参数为进度数值，值的范围在0到1之间。
  • 第二个参数为进度条显示的文字

在updateProgress方法中，我使用了Ext.defer方法来执行定时的操作。

Ext.defer 有两个参数：

  • 第一个参数为定时完成以后执行的方法
  • 第二个参数为时间长度

我在定时代码中执行了updateProgress方法本身，在进度上加0.1，用来继续更新进度。

我们在创建进度条对话框的时候调用这个方法： 

Ext.get("btn4").on("click", function () {
    Ext.MessageBox.progress("进度", "正在处理，请稍候...", "0%");
    updateProgress(0);
});

程序运行后的截图如下

【


查看在线示例


】


：

image

当进度完成以后：

image

关闭进度条对话框

在进度执行完成以后，我们可以使用下面的代码来关闭ExtJS 进度条对话框： 

Ext.MessageBox.close();

如果觉得这样太突然，可以使用上面的defer方法做一个简单的延时： 

Ext.defer(function () { Ext.MessageBox.close(); }, 200);

在200毫秒之后，进度条对话框将关闭。


版权声明：本文为pandajava原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。