转自:https://www.cnblogs.com/glsqh/p/5920500.html

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);

44. Ext信息提示对话框的更多相关文章

  1. Ext信息提示对话框

    Ext.window.MessageBox是一个工具类,他继承自Ext.window.Windoe对象,用来生成各种风格的信息提示对话框,其实例对象可以通过Ext.MessageBox或Ext.Msg ...

  2. [转载]ExtJs4 笔记(6) Ext.MessageBox 消息对话框

    作者:李盼(Lipan) 出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法 ...

  3. ExtJs4 笔记(6) Ext.MessageBox 消息对话框

    本篇演示消息对话框的用法,ExtJs封装了可能用到的各类消息框,并支持自定义的配置. 如下是用到的html: [html] <h1>各种消息框</h1> <div id= ...

  4. java基础--提示对话框的使用

    java基础--提示对话框的使用 2019-03-17-00:35:50-----云林原创 一.显示信息对话框:使用“JOptionPane.showMessageDialog”显示:   图标 对话 ...

  5. 学习EXTJS6(4)基本功能-信息提示框组件

    1.使用组件,主要配置表现形式有二种(是否可以说参数) 用逗号分隔的传统参数列表方式: <script type="text/javascript"> Ext.onRe ...

  6. AlertDialog提示对话框练习

    闲来无事,就练习了下AlertDialog对话框. 首先写了三个button,分别打开一般对话框,单选列表对话框和复选对话框. xml代码 <LinearLayout xmlns:android ...

  7. jNotify:操作结果信息提示条

    我们在提交表单后,通过Ajax响应后台返回结果,并在前台显示返回信息,jNotify能非常优雅的显示操作结果信息.jNotify是一款基于jQuery的信息提示插件,它支持操作成功.操作失败和操作提醒 ...

  8. HubSpot – 网站开发必备的 jQuery 信息提示库

    HubSpot 一款功能丰富的 jQuery 消息提示插件.它可以帮助你个性化显示您的应用程序的事务性消息.您可以轻松地包裹 Ajax 请求进度,成功和错误消息,还可以添加操作链接到您的消息中. Hu ...

  9. jQuery信息提示工具jquery.poshytip (转载)

    转载地址:http://www.helloweba.com/view-blog-123.html Poshy Tip是一款非常友好的信息提示工具,它基于jQuery,当鼠标滑向链接时,会出现一个信息提 ...

随机推荐

  1. react 导航切换

    <ul class="nav"> <li onClick={() => this.changeFontColor(0)} className={`${0 = ...

  2. Object.prototype 原型和原型链

    Object.prototype 原型和原型链 原型 Javascript中所有的对象都是Object的实例,并继承Object.prototype的属性和方法,有些属性是隐藏的.换句话说,在对象创建 ...

  3. set解两数之和--P2141 珠心算测验

    题目描述 珠心算是一种通过在脑中模拟算盘变化来完成快速运算的一种计算技术.珠心算训练,既能够开发智力,又能够为日常生活带来很多便利,因而在很多学校得到普及. 某学校的珠心算老师采用一种快速考察珠心算加 ...

  4. C语言scanf函数详细解释(转载)

    原文地址:https://blog.csdn.net/21aspnet/article/details/174326 scanf 函数名: scanf 功 能: 执行格式化输入 用 法: int sc ...

  5. Linux设置history命令显示行数以及时间

    Linux和unix上都提供了history命令,可以查询以前执行的命令历史记录但是,这个记录并不包含时间项目因此只能看到命令,但是不知道什么时间执行的如何让history记录时间呢? 解决方案 注意 ...

  6. java诗词横版--转为竖版

    import java.util.Arrays; /* 诗句横版转成竖版输出 */public class PrintPoem { public static void main(String[] a ...

  7. IDEA下tomcat中web项目乱码,控制台乱码解决指南

    若是由于过滤器,request ,response等原因,不适用. 原文作者:http://www.kafeitu.me/tools/2013/03/26/intellij-deal-chinese- ...

  8. Calculate S(n)

    Problem Description Calculate S(n). S(n)=13+23 +33 +......+n3 .   Input Each line will contain one i ...

  9. 玩一玩MEAN

    参考的书如下: Manning.Getting.MEAN.with.Mongo.Express.Angular.and.Node. 开始再次了解.

  10. ACM 数学

    欧几里得辗转相除法求最大公约数 int gcd(int a,int b) { ) return a; else return gcd(b,a%b); } 求组合数 int C(int n ,int m ...