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 常用配置项表
配置项 | 类型 | 说明 |
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);
Ext信息提示对话框的更多相关文章
- 44. Ext信息提示对话框
转自:https://www.cnblogs.com/glsqh/p/5920500.html Ext.window.MessageBox是一个工具类,他继承自Ext.window.Windoe对象, ...
- [转载]ExtJs4 笔记(6) Ext.MessageBox 消息对话框
作者:李盼(Lipan) 出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法 ...
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框
本篇演示消息对话框的用法,ExtJs封装了可能用到的各类消息框,并支持自定义的配置. 如下是用到的html: [html] <h1>各种消息框</h1> <div id= ...
- java基础--提示对话框的使用
java基础--提示对话框的使用 2019-03-17-00:35:50-----云林原创 一.显示信息对话框:使用“JOptionPane.showMessageDialog”显示: 图标 对话 ...
- 学习EXTJS6(4)基本功能-信息提示框组件
1.使用组件,主要配置表现形式有二种(是否可以说参数) 用逗号分隔的传统参数列表方式: <script type="text/javascript"> Ext.onRe ...
- AlertDialog提示对话框练习
闲来无事,就练习了下AlertDialog对话框. 首先写了三个button,分别打开一般对话框,单选列表对话框和复选对话框. xml代码 <LinearLayout xmlns:android ...
- jNotify:操作结果信息提示条
我们在提交表单后,通过Ajax响应后台返回结果,并在前台显示返回信息,jNotify能非常优雅的显示操作结果信息.jNotify是一款基于jQuery的信息提示插件,它支持操作成功.操作失败和操作提醒 ...
- HubSpot – 网站开发必备的 jQuery 信息提示库
HubSpot 一款功能丰富的 jQuery 消息提示插件.它可以帮助你个性化显示您的应用程序的事务性消息.您可以轻松地包裹 Ajax 请求进度,成功和错误消息,还可以添加操作链接到您的消息中. Hu ...
- jQuery信息提示工具jquery.poshytip (转载)
转载地址:http://www.helloweba.com/view-blog-123.html Poshy Tip是一款非常友好的信息提示工具,它基于jQuery,当鼠标滑向链接时,会出现一个信息提 ...
随机推荐
- linux下使用NFS挂载文件系统
转自linux如何使用NFS挂载文件系统 设备:一台服务器和一台客户端,这里我们把装在PC机上的RedHat作为服务器,而客户端则是嵌入式linux开发板. 环境:开发板已启动,连接好串口和网线,串口 ...
- 【Xamarin挖墙脚系列:使用Xamarin进行Hybrid应用开发】
原文:[Xamarin挖墙脚系列:使用Xamarin进行Hybrid应用开发] 官方地址:https://developer.xamarin.com/guides/cross-platform/adv ...
- AD域环境的搭建 基于Server 2008 R2
AD(Active Directory)即活动目录,微软的基础件.微软的很多产品如:Exchange Server,Lync Server,SharePoint Server,Forefront Se ...
- Android学习笔记12:图像渲染(Shader)
在Android中,提供了Shader类专门用来渲染图像以及一些几何图形. Shader类包括了5个直接子类,分别为:BitmapShader.ComposeShader.LinearGradient ...
- CSS六大选择器(注释css表里不能加注释!!)
@charset "utf-8"; /* CSS Document */ <!--标签控制器--> body{ background-color:#F00} <! ...
- 在网页中插入CSS样式表的几种方法
1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head> ...
- 浅析基于微软SQL Server 2012 Parallel Data Warehouse的大数据解决方案
作者 王枫发布于2014年2月19日 综述 随着越来越多的组织的数据从GB.TB级迈向PB级,标志着整个社会的信息化水平正在迈入新的时代 – 大数据时代.对海量数据的处理.分析能力,日益成为组织在这个 ...
- Web性能测试基本性能指标
Web性能测试的部分概况一般来说,一个Web请求的处理包括以下步骤: (1)客户发送请求 (2)web server接受到请求,进行处理: (3)web server向DB获取数据: (4)webse ...
- ASCII,Unicode和UTF-8字符编码
ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态,这被称为一个字节(byte).也就是 ...
- Spring框架整合Struts2
1,用Spring架构,及Struts2-spring-plugin插件 导入Spring的dist全部所需的jar包 Struts2的spring插件 struts2-spring-plugin.X ...