你的位置:首页 > Java教程

[Java教程]Ext信息提示对话框


  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 常用配置项表

配置项类型说明
titleString提示框的标题
msgString显示的信息内容
width  Number对话框的宽度,单位px
maxWidthNumber对话框的最大宽度,默认600px
minWidthNumber对话框的最小宽度,默认100px
closableBoolean

false将隐藏右上角的关闭按钮,默认为true。

如果已设置wait或者progress为true则该配置将被忽略,提示框只能通过程序关闭,不能通过右上角的关闭按钮关闭

modalBooleantrue为窗口模式,false为非模式窗口
fn  Function

回调函数,它将在点击控制按钮、关闭按钮、或者输入按钮,离开对话框时被调用

如果已设置wait或者progress为true则该配置将被忽略

buttonId:按钮id,如ok,yes,no,cancel

text:输入的文字

opt:传入show方法的配置对象

buttonsNumber/Boolean按钮组,可选值见buttons表,默认为false,不显示任何按钮
progressBooleantrue则显示一个进度条,默认为false,该进度条需要由程序控制滚动
progressTextString进度条上显示的文字
proxyDragBooleantrue则显示一个高亮的拖动代理,默认为false
waitBooleantrue则显示一个自动滚动的进度条,默认为false
waitConfigObject等待进度条的配置对象,再wait为true时有效
promptBooleantrue则显示一个单行文本域,默认为false
value String如果prompt设置为true,则value值将显示在文本域中
multilineBoolean如果prompt设置为true,则multiline为true显示多行文本区,false显示单行文本域
defaultTxetHeightNumber多行文本区的默认高度,默认值为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);}

    改变默认的按钮文字

//这种方法会覆盖所有的提示文字,会对设置后所有的信息提示框上的按钮文字产生影响,如果要再次改变按钮文字就需要多次设置
//OKExt.MessageBox.msgButtons[0].setText(''按钮ok);//YESExt.MessageBox.msgButtons[1].setText('按钮yes');//NOExt.MessageBox.msgButtons[2].setText('按钮no');//CANCELExt.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);