转自: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. php第二十六节课

    会话购物车 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  2. 基于python、jupyter-notebook 的金融领域用户交易行为分析

    说明:本文重在说明交易数据统计.分析方法,所有数据均为生成的数据 时间原因代码未定义成函数 统计指标:1.用户单日交易行为数据 2.按小时为计算单位,统计用户行为数据(旨在求得一天24小时中每个小时的 ...

  3. RAII手法封装互斥锁

    RAII手法是 Resource Acquisition is Initialization 的缩写,意为“资源获取即初始化”,在使用智能指针时也使用,下面是针对互斥量时的实现, #include & ...

  4. PAT 1123 Is It a Complete AVL Tree

    An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child sub ...

  5. springcloud(八):熔断器Hystrix

    熔断器 雪崩效应 在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩效应是一种因“服务提供者”的不可用导致“服务 ...

  6. mysql 查询当天、本周,本月,上一个月的数据---https://www.cnblogs.com/benefitworld/p/5832897.html

    mysql 查询当天.本周,本月,上一个月的数据 今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT * FROM ...

  7. c++ 上机实验题

    c++语言俺是不会啦,但是朋友考试需要,那只能勉为其难的入门下做做考试题了. 以下就是具体的题目和答案: ----------------------------------------------- ...

  8. 在设计DJANGO用户更改密码时,出现NoReverseMatch at /account/password-change/这种妖精如何办?

    网上看到很多解决办法.但对于我来说, 好像加个post_change_redirect这个参数是最有效的. from django.conf.urls import url from . import ...

  9. mongodb片健的选取及更改

    1.总的原则:选键的时候多考虑以下问题. 写操作是怎么样的,有多大? 系统每小时会写多少数据,每天呢,高峰期呢 那些字段是随机的,那些是增长的 读操作是怎么样的,用户在访问那些数据 数据索引做了吗?应 ...

  10. 用两种方法(递归和DP)实现了青蛙跳台阶

    做了这道题目: https://www.nowcoder.net/practice/8c82a5b80378478f9484d87d1c5f12a4?tpId=13&tqId=11161&am ...