Ext.window.MessageBox是一个工具类,他继承自Ext.window.Windoe对象,用来生成各种风格的信息提示对话框,其实例对象可以通过Ext.MessageBox或Ext.Msg进行访问,使用Ext.MessageBox和使用Ext.Msg有相同的效果,而后者提供了更简短的调用方式。为了描述方便后边我们将使用Ext.MessageBox代表Ext.window.MessageBox实例对象。
/** **Ext.MessageBox和Ext.Msg只是引用了Ext.window.MessageBox的实例对象,Ext.Msg.alert方法调用的是Ext.window.MessageBox实例对象的alert方法,**避免混淆两者之间的关系 **/
Ext.MessageBox提供的信息提示对话框显示的文本不仅支持纯文本显示,还支持使用HTML格式文本,采用HTML中的格式化方法进行排版,效果更佳丰富多彩 ,甚至可以在提示信息中增加动态图标,使提示信息更加生动。
Ext.Msg.alert("提示","<font color=red>支持HTML格式文本</font>")
标准JS提供的信息提示对话框会对JS程序的运行产生阻塞。Ext.MessageBox是异步的,它的调用并不会停止浏览器中代码的执行,如果希望在信息提示框出现并且用户做出反馈后才能调用程序,就需要吧相应程序组成一个函数,并且将该函数作为回调函数提供给Ext.MessageBox,再用户做出反馈后该回调函数将被调用,这样就可以达到控制程序执行的目的了。
Ext.onReady(function(){ alert(‘我会停止程序的执行。‘); Ext.Msg.alert(‘提示‘,‘我不会停止程序的执行。‘); }) /** **执行代码会看到标准alert显示,而ExtJs版的alert并没有同事显示出来,说明程序的执行在显示标准alert之后被阻塞了,导致接下来的代码并没有执行 **/ Ext.onReady(function(){ Ext.Msg.alert(‘提示‘,‘我不会停止程序的执行。‘); alert(‘我会停止程序的执行。‘); }) /** **执行代码会看到标准的alert与ExtJs的alert同时出现,说明ExtJs的alert是异步执行的,他不会阻塞程序代码的继续执行, **这是他与标准alert最大的区别,会对编写代码的方式产生一定的影响 **/
Ext.MessageBox.alert()
一个只读信息提示框,用来代替js标准的alert()方法,有一个确定按钮,如果为其提供一个回调函数,则该函数将在单击按钮后被调用(不包括右上角的退出按钮),所单击按钮的id将被作为唯一的参数传递到回调函数中
调用格式: alert(String title, String msg ,[Function fn],[Object scope]) 参数说明: title: 提示框标题; msg: 显示的信息内容; [Function fn]: (可选) 回调函数; [Object scope]: (可选) 回调函数的作用域; 示例: Ext.Message.alert(‘提示‘,‘请单击我,确认‘,callBack); function callBack(id){ alert(‘单击的按钮ID是:‘+id); }
Ext.MessageBox.confirm()
显示一个确认信息框,用来代替JS标准的confirm()方法,具有两个按钮"是"和"否",如果为其提供一个回调函数,则该函数将在单击按钮后被调用(不包括右上角的退出按钮),所单击按钮的id将被作为唯一的参数传递到回调函数中。
Ext.MessageBox.confirm的使用方法,与alert类似该确认对话框也是异步执行,不会造成代码阻塞。
调用格式: confirm(String title, String msg ,[Function fn],[Object scope]) 参数说明: title: 提示框标题; msg: 显示的信息内容; [Function fn]: (可选) 回调函数; [Object scope]: (可选) 回调函数的作用域; 示例: Ext.Message.confirm(‘提示‘,‘请单击我,确认‘,callBack); function callBack(id){ alert(‘单击的按钮ID是:‘+id); }
Ext.MessageBox.prompt()
显示一个获取用户输入信息的提示框,用来代替JS标准的prompt()方法,具有两个按钮"确认"和"取消",并提供文本输入框接受用户的输入,如果为其提供一个回调函数,则该函数将在单击按钮后被调用(不包括右上角的退出按钮),所单击按钮的id将被作为唯一的参数传递到回调函数中。
调用格式: prompt(String title, String msg ,[Function fn],[Object scope],[Boolean/Number multiline]) 参数说明: title: 提示框标题; msg: 显示的信息内容; [Function fn]: (可选) 回调函数; [Object scope]: (可选) 回调函数的作用域; [Boolean/Number multiline]: 设置false将显示一个单行文本域,设置为true将以默认高度显示一个多行文本区。或者以像素为单位直接设置文本域的高度。默认flase 示例: Ext.Message.prompt(‘提示‘,‘请输入一些内容看看‘,callBack,this,true,"我是默认值"); function callBack(id,msg){ alert(‘单击的按钮ID是:‘+id+‘/n‘+‘输入的内容是:‘+msg); }
Ext.MessageBox.wait()
显示一个自动滚动的进度条提示框,他经常被用在一个耗时的交互操作当中,他不能定义一个时间间隔自动关闭,程序猿有责任在交互操作完成之后去关闭它
调用格式: wait(String msg ,[String title], [Object config]) 参数说明: msg: 显示的信息内容; title: 提示框标题,为可选参数; [Object config]:用户配置进度条的配置对象,为可选参数; 示例: Ext.Message.wait(‘请等待,操作需要很长时间!‘,‘提示‘,{ text:"进度条上的文字" });
Ext.MessageBox.show()
基于配置来显示新的信息提示框或重置一个已存在的信息提示框,前面介绍的3个提示框内部调用的都是这个方法,尽管那些调用的简单快捷,但是他们并不支持所有的配置项,要简历更加个性化、功能更强大的提示框还需要从掌握Ext.MessageBox.show方法做起
Ext.MessageBox.show方法支持的配置项非常丰富,不但可以配置提示标题、提示信息、回调函数等常见的部分,他还提供了配置按钮文字及提示图片图标的方法,给了我们控制信息提示框的各种可能性,下边将分别给出这些配置项,和这些配置项共分为3个列表
Ext.MessageBox 常用配置项表
配置项 | 类型 | 说明 |
title | String | 提示框的标题 |
msg | String | 显示的信息内容 |
width | Number | 对话框的宽度,单位px |
maxWidth | Number | 对话框的最大宽度,默认600px |
minWidth | Number | 对话框的最小宽度,默认100px |
closable | Boolean |
false将隐藏右上角的关闭按钮,默认为true。 如果已设置wait或者progress为true则该配置将被忽略,提示框只能通过程序关闭,不能通过右上角的关闭按钮关闭 |
modal | Boolean | true为窗口模式,false为非模式窗口 |
fn | Function |
回调函数,它将在点击控制按钮、关闭按钮、或者输入按钮,离开对话框时被调用 如果已设置wait或者progress为true则该配置将被忽略 buttonId:按钮id,如ok,yes,no,cancel text:输入的文字 opt:传入show方法的配置对象 |
buttons | Number/Boolean | 按钮组,可选值见buttons表,默认为false,不显示任何按钮 |
progress | Boolean | true则显示一个进度条,默认为false,该进度条需要由程序控制滚动 |
progressText | String | 进度条上显示的文字 |
proxyDrag | Boolean | true则显示一个高亮的拖动代理,默认为false |
wait | Boolean | true则显示一个自动滚动的进度条,默认为false |
waitConfig | Object | 等待进度条的配置对象,再wait为true时有效 |
prompt | Boolean | true则显示一个单行文本域,默认为false |
value | String | 如果prompt设置为true,则value值将显示在文本域中 |
multiline | Boolean | 如果prompt设置为true,则multiline为true显示多行文本区,false显示单行文本域 |
defaultTxetHeight | Number | 多行文本区的默认高度,默认值为75px |
icon | String | 一个样式文件,他为对话框提供一个背景图,详细见icon表 |
buttons已提供配置对象说明(区分大小写)
提示框按钮配置对象 | 显示按钮 |
Ext.Msg.CANCEL | 取消 |
Ext.Msg.NO | 否 |
Ext.Msg.OK | 确认 |
Ext.Msg.OKCANCEL | 确认、取消 |
Ext.Msg.YES | 是 |
Ext.Msg.YESNO | 是、否 |
Ext.Msg.YESNOCANCEL | 是、否、取消 |
icon图标样式配置
样式类 | 说明 | 效果描述 |
Ext.Msg.ERROR | 错误图标 | 红圆 叉子 |
Ext.Msg.INFO | 信息图标 | 气泡 I |
Ext.Msg.OUESTION | 问题图标 | 气泡 ? |
Ext.Msg.WARNING | 警告图标 | 三角 ! |
Ext.MessageBox.show({ title:‘提示‘, msg:‘我有三个按钮,和一个多行文本区‘, modal:true, prompt:true, value:‘请输入‘, fn:callBack, buttons:Ext.Msg.YESNOCANCEL, icon:Ext.Msg.QUESTION }) function callBack(id,msg){ alert(‘单击的按钮ID是:‘+id+‘\n‘+‘输入的内容是:‘+msg); }
改变默认的按钮文字
//这种方法会覆盖所有的提示文字,会对设置后所有的信息提示框上的按钮文字产生影响,如果要再次改变按钮文字就需要多次设置//OK Ext.MessageBox.msgButtons[0].setText(‘‘按钮ok); //YES Ext.MessageBox.msgButtons[1].setText(‘按钮yes‘); //NO Ext.MessageBox.msgButtons[2].setText(‘按钮no‘); //CANCEL Ext.MessageBox.msgButtons[3].setText(‘按钮cancel‘);
动态更新提示框内容
var msgBox = Ext.MessageBox.show({ title:"提示", msgL"动态更新的信息文字", modal:true, buttons:Ext.Msg.OK, fn:function(){ //停止定时任务 Ext.TaskManager.stop(task); } }) //Ext.TaskManager是一个功能类,用来定时执行程序 //在这里我们使用它来定时触发提示信息的更新 var task = { run:function(){ msgBox.updateText(‘会动的时间:‘+Ext.util.Format.date(new Date(),‘Y-m-d g:i:s A‘)) }, interval:1000 } Ext.TaskManager.start(task);
更新进度条及提示信息示例
var msgBox = Ext.MessageBox.show({ title:"提示", msg:‘动态更新的进度条和信息文字", modal:true, width:300, progress:true }) var count = 0; //滚动条被刷新的次数 var percentage = 0; //进度百分比 var progressText = ""; //进度条信息 var task = { run : function(){ count++; //计算进度 precentage = count/10; //生产进度条文字 progressText = "当前完成度:"+percentage*100+"%"; //更新信息提示对话框 msgBox.updateProgress(percentage,progressText, ‘当前时间:‘+Ext.util.Format.date(new Date(),‘Y-m-d g:i:s A‘); ) //刷新10次后关闭信息提示对话框 if(count > 10){ Ext.TaskManager.stop(task); msgBox.hide(); } }, interval:100 } Ext.TaskManager.start(task);