窗口对话框简单实例

最新推荐文章于 2021-05-26 13:44:56 发布

原创最新推荐文章于 2021-05-26 13:44:56 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #JavaScript #CSS #活动 #HTML #ViewUI

extjs 专栏收录该内容

18 篇文章

订阅专栏

function save(button) {

	if (button == "yes") {
		// 执行数据保存操作
	} else if (button == "no") {
		// 不保存数据
	} else {
		// 取消当前操作
	}
}

Ext.onReady(function() {
			// 对话框
			Ext.get("btn").on("click", function() {
						Ext.MessageBox.alert("请注意", "这是点击新窗口按钮");// 提示框
					});

			// confirm的方法签名为
			// confirm ( String title, String msg, [Function fn], [Object scope]
			// ) ，
			// 参数title表示对话框的标题，参数msg表示对话框中的提示信息，这两个参数是必须的；可选的参数fn表示当关闭对话框后执行的回调函数，参数
			// scope表示回调函数的执行作用域。
			// 回调函数可以包含两个参数，即button与text,button表示点击的按钮，
			// text表示对话框中有活动输入选项时输入的文本内容
			Ext.get("delbtn").on('click', function() {

						Ext.Msg.confirm('提示', '确定要删除?', function(button, text) {

									if (button = "yes") {

										// 执行删除操作
										alert("成功删除")
									}
								})
					})
			Ext.get("btnprompt").on('click', function() {

						// 参数一：提示标题，参数二：信息内容，参数三：函数(选择按钮状态,输入的文本内容)
						Ext.Msg.prompt('提示', '输入内容', function(button, text) {

									if (button == "ok") {
										alert('您输入的内容是：' + text);
									}

									alert('你没有输入内容');

								})
					})

			Ext.get("btnprogress").on('click', function() {

						// 参数一：标题，参数二：提示框内容信息，参数三:进度条显示的文本内容
						Ext.Msg.progress('提示', '正在进行', '正在上传')
					})

			Ext.get("definebtn").on('click', function() {

						Ext.Msg.show({
									title : '保存数据',
									msg : '你已经做了一些数据操作，是否保存数据修改?',
									buttons : Ext.Msg.YESNOCANCEL,
									fn : save,// 调用save函数
									icon : Ext.MessageBox.QUESTION
								});
					})

		})

<%@ page language="java" contentType="text/html; charset=gb2312"
	pageEncoding="gb2312"%>
<%
	request.setAttribute("base", request.getContextPath());
%>

<html>
	<head>
		
		<title>窗口对话框</title>
		<link rel="stylesheet" type="text/css"
			href="${base}/script/ext/resources/css/ext-all.css">
		<script type="text/javascript"
			src="${base}/script/ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="${base}/script/ext/ext-all.js"></script>
		<script type="text/javascript" src="${base}/script/sample/third.js"></script>
		
	</head>
	<body>
		
		<input type="button" id="btn" name="btn" value="新窗口"/>
		<input type="button" id="delbtn" name="btn" value="删除"/>
		<input type="button" id="btnprompt" name="btn" value="测试prompt提示窗口" />
		
		
		<input type="button" id="btnprogress" name="btnprogress" value="测试progress进度窗口" />
		
		<input type="button" id="definebtn" name="definebtn" value="自定义对话框" />
	</body>
</html>