Ext各种对话框
<HTML> <HEAD> <TITLE>选择确认对话框</TITLE> <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" /> <script type="text/javascript" src="Ext/ext-base.js"></script> <script type="text/javascript" src="Ext/ext-all.js"></script> <script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script> </HEAD> <script type="text/javascript"> function start(){ //选择确认对话框和传统的JS一样使用的是Confirm函数，但是在Ext中这些对话框被统一归结到Message下面:“Ext.MessageBox.confirm("对话框的标题","对话框消息正文");”,如果为其提供一个回调函数，则该函数将在单击按钮后被调用(包括右上角的退出按钮)，所单击按钮的id将被作为唯一的参数传递到回调函数中。使用方法是在confirm的参数第三个位置加上回调函数名，然后下面完成这个回调函数，定义一个参数接收用户的选择结果，然后可以根据选择来作出判断。 Ext.MessageBox.confirm("选择框", "你到底是选yes还是no?", callback); function callback(id) { if (id == "yes") { Ext.MessageBox.alert("提示","你点了确定"); } else { Ext.MessageBox.alert("提示", "你点了取消?"); } } } Ext.onReady(start); </script> <BODY> </BODY> </HTML>
<HTML> <HEAD> <TITLE>带输入的确认对话框</TITLE> <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" /> <script type="text/javascript" src="Ext/ext-base.js"></script> <script type="text/javascript" src="Ext/ext-all.js"></script> <script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script> </HEAD> <script type="text/javascript"> function msg() { //带输入的确认对话框，用的是prompt，和上个效果一样，也需要定义回调函数用来接收用户操作的结果，同时还有用户输入的内容。 Ext.MessageBox.prompt("提示", "随便写点什么吧！", callback); function callback(id, text) { if (id == "ok") { Ext.MessageBox.alert("提示","你输入的是：" + text); } else { Ext.MessageBox.alert("提示","你已经取消了输入！"); } } } Ext.onReady(msg); </script> <BODY> </BODY> </HTML>
<HTML> <HEAD> <TITLE>带多行文本输入框的对话框</TITLE> <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" /> <script type="text/javascript" src="Ext/ext-base.js"></script> <script type="text/javascript" src="Ext/ext-all.js"></script> <script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script> </HEAD> <script type="text/javascript"> function msg() { //带多行文本输入框的对话框，这个例子实现思路需要变化一下，使用自定义对话框，原因是原生JS中本来就没有多行文本框这一说。而且接收返回值的思路需要变化。 Ext.MessageBox.show({ title: '标题', msg: '要显示的内容', width: 300, buttons: Ext.MessageBox.OKCANCEL, // icon:Ext.MessageBox.INFO,//显示图标 icon: "ic", multiline: true, fn: callback//这个是Ext专属属性，用来指示处理函数名 }); function callback(id, text) { Ext.MessageBox.alert(text); } } Ext.onReady(msg); </script> <BODY> </BODY> </HTML>
<HTML> <HEAD> <TITLE>多个按钮选择的对话框</TITLE> <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" /> <script type="text/javascript" src="Ext/ext-base.js"></script> <script type="text/javascript" src="Ext/ext-all.js"></script> <script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script> </HEAD> <script type="text/javascript"> function msg() { //显示多个按钮供客户选择，用于多条件处理的情况。 Ext.MessageBox.show({ title: '标题', msg: '要显示的内容', buttons: { yes: true, no: true, cancel: true }, // buttons: { yes: "是啊", no: "不啊", cancel: "取消了啊" }, fn: callback//这个是Ext专属属性，用来指示处理函数名 }); function callback(id) { Ext.MessageBox.alert("提示","你选择的是"+id); } } Ext.onReady(msg); </script> <BODY> </BODY> </HTML>
<HTML> <HEAD> <TITLE>进度条对话框</TITLE> <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" /> <script type="text/javascript" src="Ext/ext-base.js"></script> <script type="text/javascript" src="Ext/ext-all.js"></script> <script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script> </HEAD> <script type="text/javascript"> function msg() { //关于进度条，有两种实现思路，一是按大小确定，一是按时间确定。本例完成按大小控制进度条 Ext.MessageBox.show({ title: '请稍等', msg: '加载中...', 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); } } Ext.onReady(msg); </script> <BODY> </BODY> </HTML>
<HTML> <HEAD> <TITLE>选择确认对话框</TITLE> <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" /> <script type="text/javascript" src="Ext/ext-base.js"></script> <script type="text/javascript" src="Ext/ext-all.js"></script> <script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script> <script type="text/javascript"> function extAlert(){ //Ext.MessageBox.alert("title","msg"); Ext.Msg.alert("title","msg"); } function extConfirm(){ //传统方式 /* var ret; ret = confirm('是否继续？'); if(ret){ alert("继续"); }else{ alert("不继续"); } */ //Ext.MessageBox.confirm("选择框", "你到底是选yes还是no?", callback); Ext.Msg.confirm("友情提示", "数据删除后不能恢复，是否真要删除？",getResult); } function getResult(btn){ console.dir(arguments); if (btn == "yes") { Ext.MessageBox.alert("提示","你点了确定"); } else { Ext.MessageBox.alert("提示", "你点了取消?"); } } var v = "this is window"; var b1 = { v : "this is b1"}; function showResult(btn,text){ if (btn == "ok") { Ext.MessageBox.alert("提示","你输入的是：" + text +"<br>" + this.v); } else { Ext.MessageBox.alert("提示","你已经取消了输入！"); } } function extPrompt(){ //传统的 /* var ret = prompt("请输入XXX："); alert(ret); */ //Ext.MessageBox.prompt("提示", "随便写点什么吧！", callback); //Ext.Msg.prompt("提示", "随便写点什么吧！", showResult); Ext.Msg.prompt("提示", "随便写点什么吧！", showResult,b1,50,"defalt text"); } function extWait(){ var ret = Ext.Msg.wait("正在进行处理，请稍候..."); setTimeout(function(){ret.hide();},3000); } function extProgress(){ var ret = Ext.Msg.progress("处理进度","进度："); var r = 0; var timer = setInterval(function(){ ret.updateProgress(r+=0.2,r*100+"%"); },500); setTimeout(function(){ clearInterval(timer); },5000); } //自定义对话框 function extCustomDialog(){ Ext.Msg.show({ title:"保存数据", msg:"你已经做了一些操作，是否要保存当前内容的修改？", buttons:Ext.Msg.YESNOCANCEL, fn:doSave, icon:Ext.MessageBox.QUESTION }); } function doSave(button,text){ if(button=="yes"){ //执行数据保存操作 }else if(button == "no"){ //执行不保存操作 }else{ //执行取消操作 } } </script> </HEAD> <BODY> 传统对话框<br> <a href="javascript:alert('123');">alert</a> <br> <a href="#" onclick="confirm('是否继续？');">confirm确认对话框</a> <br> <a href="javascript:prompt('请输入XXX：');">prompt输入对话框</a> <br> Ext对话框<br> <a href="javascript:extAlert()">alert</a> <br> <a href="#" onclick="extConfirm();">confirm确认对话框</a> <br> <a href="javascript:extPrompt();">prompt输入对话框</a> <br> <a href="javascript:extWait();">wait对话框</a> <br> <a href="javascript:extProgress();">进度条对话框</a> <br> <a href="javascript:extCustomDialog();">自定义对话框</a> </BODY> </HTML>
自定义对话框也可以定义对话框的图标，只需要加上：“icon:Ext.MessageBox.INFO,//显示图标”，即可。同时也可以自定义图标，显示成你需要的图片，
实现思路是：
1. 先定义一个类样式，指定背景图片地址和不平铺；
2. 在icon属性中引入类样式名；
