//消息框 function extjsAlert(){ Ext.MessageBox.alert("提示框","这是一个提示框",function(){ alert("提示框已经关闭"); }) } //输入框 function extjsPrompt(){ Ext.MessageBox.prompt("输入框","请输入您的姓名：",function(btn,txt){ Ext.MessageBox.alert("结果","您点击了"+btn+"按钮，输入的内容为 "+txt); }) } //Ext.MessageBox.prompt(String title,String msg,Function fn,Object scope,Boolean/Number multiline) //从定义来看，最后的一个参数，如果为ture或者为数字，则将允许输入多行或者指定默认的高度 function extjsPrompt2(){ Ext.MessageBox.prompt("输入框","请输入您的姓名：",function(btn,txt){ Ext.MessageBox.alert("结果","您点击了"+btn+"按钮，输入的内容为 "+txt); },this,300); } //确认框 function extjsConfirm(){ Ext.MessageBox.confirm("确认","这点击按钮作出选择",function(btn){ Ext.MessageBox.alert("您点击的按钮是："+btn); }) } //会飞的消息框 function extjsAnimal(){ var config = { title :"飞出的消息框", msg : "你猜他什么时候飞过来？", 300, multiline:true, closable:true, buttons:Ext.MessageBox.YESNOCANCEL, icon:Ext.MessageBox.QUESTION, animEl:"fly"//fly 为按钮的id } Ext.MessageBox.show(config); } //自定义消息框，Ext.MessageBox.show(Object config)可是自定义消息框， //config这个参数包络万象，使用json格式传输信息到方法中即可 //config的常见属性 ：title ，msg，width，multiline，closable，buttons，icon，fn function MyExtjsBox(){ var config = { title:"自定义对话框", msg:"喜欢自定义的框框吗？", 300, multiline:false, closable:false, buttons:Ext.MessageBox.YESNOCANCEL, fn:function(btn,txt){ console.log(btn); Ext.MessageBox.alert("提示","您点击了"+btn+"按钮，输入的值是："+txt); } } Ext.MessageBox.show(config); } //进度条对话框，也是一个自定义的消息框，配置config的时候添加了progress=true即可，同时还可以设置其他的相关信息 function extjsProgress(){ var config={ title:"请等待", msg:"正在加载项目", progressText:"正在初始化...", 300, progress:true, closable:false } Ext.MessageBox.show(config); 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); } }
测试：
<html> <head> <title>Ext Buttons</title> <link rel="stylesheet" type="text/css" href="ext-all.css"/> <script type="text/javascript" src="ext-base.js"></script> <script type="text/javascript" src="ext-all.js"></script> <script type="text/javascript" src="buttons.js"></script> </head> <body> <h1>消息框测试</h1> <p> <input type="button" value="提示框" id="alertBox" onclick="extjsAlert();"><br> <input type="button" value="输入框" id="inputBox" onclick="extjsPrompt2();"><br> <input type="button" value="确认框" id="confirmBox" onclick="extjsConfirm();"><br> <input type="button" value="会飞的框" id="fly" onclick="extjsAnimal();"><br> <input type="button" value="自定义的框" id="mybox" onclick="MyExtjsBox();"><br> <input type="button" value="进度条的框" id="progerssBox" onclick="extjsProgress();"><br> </p> </body> </html>