首页 / EXTJS / 三、ExtJS之对话框控件

三、ExtJS之对话框控件

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了三、ExtJS之对话框控件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4816字，纯文字阅读大概需要7分钟。

内容图文

Extjs 在实现消息框的时候，完全摈弃了传统的风格，不再弹出新的对话框，而是在当前页面跳出一个层，并将原页面完整覆盖。原来，只是一种模拟。在 Ext 中，定义了一个类MessageBox，该类还有一个更精简的名字Msg，所有消息框都定义在该类中。

建立dialogs.js文件。


提示框（Alert）

 

提示框的语法：Ext.MessageBox. alert ( String title, String msg, Function fn, Object scope );

参数定义如下：

  1. title：标题
  2. msg：提示内容
  3. fn：提示框关闭后自动调用的回调函数
  4. scope：作用域，用于指定this指向哪里，一般不用管他，特殊情况下有用
    其实，通常情况下，我们用得更多的是title和msg两个参数

                                                      

extjsAlert1=function(){
	Ext.MessageBox.alert("提示框","这是一个提示框");
}

extjsAlert2=function(){
	Ext.MessageBox.alert("提示框","这是一个提示框",function(){
		alert("提示框关闭了");
	});
}

记住函数名不要使用和DOM模型相同的名字，他们犯冲。

 

输入框（promt）

 

输入框用来提示输入字符串，相当于window.prompt()方法。

语法：Ext.MessageBox.prompt(String title,String msg, Function fn, Object scope, Boolean/Numbermultiline )

从定义中可以看到，前四个参数和提示框一样，最后多了一个参数，如果为true 或为数字，将允许输入多行或者指定默认高度（像素）。

 

extjsPromt1=function(){
	Ext.MessageBox.prompt("输入框","请输入您的姓名：",function(btn,txt){
		Ext.MessageBox.alert("结果","您点击了" + btn + "按钮，<br>输入内容为：" + txt);
	});
}

extjsPromt2=function(){
	Ext.MessageBox.prompt("输入框","请输入您的姓名：",function(btn,txt){
		Ext.MessageBox.alert("结果","您点击了" + btn + "按钮，<br>输入内容为：" + txt);
	},this,100);
}

单行输入

                                 

 

多行输入

                                

 

注意回调函数的参数，第一个为点击的按钮的名字，如果点击确定，为“ok”，如果点击取消，为“cancel”，第二个参数就是用户输入的文本。

 

确认框（confirm）


 确认框提示用户作出选择，语法如下：Ext.MessageBox.confirm ( String title, String msg, Function fn, Object scope )参数同上

 

extjsConfirm=function(){
	Ext.MessageBox.confirm("确认","请点击下面的按钮做出选择",function(btn){
		Ext.MessageBox.alert("您的选择是：" + btn);
	});
}

                                            

 

可以通过回调函数的参数btn采取相应的行动。

 

自定义消息框（show）

 

show()方法的语法如下：Ext.MessageBox.show ( Object config )语法是不是显得更简单？不要小瞧了他，config这个参数可谓包罗万象，使用json格式可以传输很多信息到方法中去。

config中常见属性如下：

  • title：消息框标题栏
  • msg：消息内容
  • width：消息框的宽度
  • multiline：是否显示多行文本
  • closable：是否显示关闭按钮
  • buttons：按钮
  • icon：图标
  • fn：回调函数

在上面的例子中，不熟悉的有buttons 和icon，这些选项在Ext.MessageBox 中已有定义。

 

buttons（按钮）的取值如下：

  • OK：只有“确定”按钮
  • CANCEL：只有“取消”按钮
  • OKCANCEL：有“确定”和“取消”按钮
  • YESNO：有“是”和“否”按钮
  • YESNOCANCEL：有“是”、“否”和“取消”按钮

icons（图标）取值如下：

  • INFO：信息图标
  • WARNING：警告图标
  • QUESTION：询问图标
  • ERROR：错误图标 
extjsShow=function(){
	var config={
		title: "自定义对话框",
		msg: "这是一个自定义对话框，想怎么搞就怎么搞",
		width: 400,
		multiline: true,
		closable: false,
		buttons: Ext.MessageBox.YESNOCANCEL,
		icon: Ext.MessageBox.QUESTION,
		fn: function(btn, txt){
				Ext.MessageBox.alert("结果", "您点击了‘yes’按钮<br>输入的值是："
				+ txt);
		}
	};
	
	Ext.MessageBox.show(config);
}

                   

 

等待对话框（wait）


 wait( String msg, String title, Object config)

显示一个带有不断自动更新的进度条的消息框。这个可以被用在一个长时间运行的进程中防止用户交互。需要在进程完成的时候关闭消息框。

第三个参数表示配置选项，在本例中设置了internal选项为100，表示每100ms进度条前进一次。

 

extjsWait1=function(){
	Ext.MessageBox.wait('任务正在进行中，请稍候。。。','等待',{internal:100});
	setTimeout(function(){
		Ext.MessageBox.hide();
		Ext.MessageBox.alert('结束','任务已完成');
	},6000);
}

                               

 

进度条对话框（progress）

 

进度条对话框也是一个自定义消息框，配置config 时添时progress=true 即可，同时还可以设置其他相关信息，如进度提示等。Extjs 为我们提供的只是一个对话框而已，进度条的滚动还得通过代码实现。下面是进度条的代码示范：

 

extjsProgress=function(){
	Ext.MessageBox.show({
		title:'请等待',
		msg:'正在加载...',
		progressText:'正在初始化...',
		width:300,
		progress:true,//此属性证明这是一个进度条
		closable:false
	});
	
	var f=function(v){
		return function(){
			if(v==12){
				Ext.MessageBox.hide();
				Ext.MessageBox.alert('完成','所有项目加载完毕！');
			}
			else{
				var i = v/11;
				Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%已完成');
			}
		};
	}
	
	for(var i=1;i<13;i++){
		setTimeout(f(i),i*500);
	}
}

                              

 

在上面的代码中，progressText 属性是进度条滚动之前最初的文本，滚动进程由updateProgress(Number value, String progressText)方法来定义，参数value是从0~1之间的小数，表示进度百分比；progressText 则表示进度条滚动过程中的文本提示信息，如Ext.MessageBox.updateProgress(i, Math.round(100*i)+‘% 已完成‘);。


页面html代码

<!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>对话框</title>
<link rel="stylesheet" type="text/css" href="script/resources/css/ext-all.css" />
<script type="text/javaScript" src="script/adapter/ext/ext-base.js"></script>
<script type="text/javaScript" src="script/ext-all.js"></script>
<script type="text/javascript" src="script/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript" src="js/dialogs.js"></script>
</head>
<body>
<center>
<br>
	<hr>
	<input type="button" value="简单提示框" onclick="extjsAlert1()">
	<hr>
	<input type="button" value="带有回调函数的提示框" onclick="extjsAlert2()">
	<hr>
	<input type="button" value="单行输入框" onclick="extjsPromt1()">
	<hr>
	<input type="button" value="多行输入框" onclick="extjsPromt2()">
	<hr>
	<input type="button" value="确认框" onclick="extjsConfirm()">
	<hr>
	<input type="button" value="自定义对话框" onclick="extjsShow()">
	<hr>
	<input type="button" value="等待对话框" onclick="extjsWait1()">
	<hr>
	<input type="button" value="进度对话框" onclick="extjsProgress()">
	<hr>
</center>
</body>
</html>

原文：http://blog.csdn.net/bruce_6/article/details/30526137

内容总结

以上是互联网集市为您收集整理的三、ExtJS之对话框控件全部内容，希望文章能够帮你解决三、ExtJS之对话框控件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1201683.html

来源：【匿名】