Ext.MessageBox消息框
Ext JS消息提示框主要包括:alert、confirm、prompt、show
1、Ext.MessageBox.alert()
调用格式:
alert( String title, String msg, [Function fn], [Object scope] )
参数说明:
title:提示框的标题。
msg:显示的消息内容。
[Function fn]:(可选)回调函数。
[Object scope]:(可选)回调函数的作用域。
返回值:
Ext.window.MessageBox

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head runat="server">
5 <title>Hello World</title>
6 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
7 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
8 <script type="text/javascript">
9 Ext.onReady(function () {
10 Ext.MessageBox.alert("提示", "Hello World !");
11 });
12 </script>
13 </head>
14 <body>
15 </body>
16 </html>

效果图:
ExtJS MessageBox alert支持HTML格式文本。

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>Ext.MessageBox.alert支持HTML格式文本</title>
5 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
6 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 Ext.onReady(function () {
9 Ext.MessageBox.alert("提示", "<font color='red'>支持HTML格式文本</font>");
10 });
11 </script>
12 </head>
13 <body>
14 </body>
15 </html>

效果图:
回调函数:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>Hello World</title>
5 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
6 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 // Ext.onReady(function () { 9 // Ext.MessageBox.alert("提示", "Hello World !", callBack);10 // });11
12 // function callBack(id) {13 // alert("单击的按钮ID是:" + id);14 // }15
16 Ext.onReady(function () {
17 Ext.MessageBox.alert("提示", "Hello World !", function (id) { alert("单击的按钮ID是:" + id); });
18 });
19 </script>
20 </head>
21 <body>
22 </body>
23 </html>

2、Ext.MessageBox.confirm()
调用格式:
confirm( String title, String msg, [Function fn], [Object scope] )
参数说明及返回值与Ext.MessageBox.alert()相同。

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>Ext.MessageBox.confirm</title>
5 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
6 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 // Ext.onReady(function () {
9 // Ext.MessageBox.confirm("提示", "请单击我,做出选择!", callBack);
10 // });
11
12 // function callBack(id) {
13 // alert("单击的按钮ID是:" + id);
14 // }
15
16 Ext.onReady(function () {
17 Ext.MessageBox.confirm("提示", "请单击我,做出选择!", function (id) { alert("单击的按钮ID是:" + id); });
18 });
19 </script>
20 </head>
21 <body>
22 </body>
23 </html>

效果图:
3、Ext.MessageBox.prompt()
调用格式:
confirm( String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value] )
参数说明:
[Boolean/Number multiline]:设置为false将显示一个单行文本域,设置为true将以默认高度显示一个多行文本区。或者以像素为单位直接设置文本域的高度。默认为false。

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>Ext.MessageBox.prompt</title>
5 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
6 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 // Ext.onReady(function () { 9 // Ext.MessageBox.prompt("提示", "请输入内容:", callBack, this, true, "我是默认值");10 // });11
12 // function callBack(id, msg) {13 // alert("单击的按钮ID是:" + id + "\n" + "输入的内容是:" + msg);14 // }15
16 Ext.onReady(function () {
17 Ext.MessageBox.prompt("提示", "请输入内容:", function (id, msg) { alert("单击的按钮ID是:" + id + "\n" +"输入的内容是:" + msg); }, this, true, "我是默认值");
18 });
19 </script>
20 </head>
21 <body>
22 </body>
23 </html>

效果图:
4、Ext.MessageBox.wait()
调用格式:
wait( String msg, [String title] , [Object config] )
参数说明:
msg:显示的消息内容。
[String title]:提示框标题,为可选参数。
[Object config]:用于配置进度条的配置对象,为可选参数。
返回值:
Ext.window.MessageBox
代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.MessageBox.wait示例</title>
<link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.MessageBox.wait("请等待,操作需要一定时间!", "提示", {
text:"进度条上的文字"
});
});
</script>
</head>
<body>
</body>
</html>

效果图:
5、Ext.MessageBox.show()
Ext.MessageBox常用配置项:
配置项 | 类型 | 说明 |
---|---|---|
title | String | 提示框标题 |
msg | String | 显示的消息内容 |
width | Number | 对话框的宽度,以px为单位 |
maxWidth | Number | 对话框的最大宽度,默认为600px |
minWidth | Number | 对话框的最小宽度,默认为100px |
closable | Boolean | false将隐藏右上角的关闭按钮,默认为true |
modal | Boolean | true为模态窗口,false为非模式窗口 |
fn | Function |
回调函数 参数说明: buttonId:按钮id text:输入的文字 opt:传入show方法的配置对象 |
buttons | Number/Boolean | 按钮组,默认为false,不显示任何按钮 |
progress | Boolean | true则显示一个进度条,默认为false,该进度条需要由程序控制滚动 |
progressText | String | 进度条上显示的文字,默认为“” |
proxyDrag | Boolean | true则显示一个highlight拖动代理,默认为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显示单行文本域 |
defaultTextHeight | Number | 多行文本域的默认高度,默认值为75px |
icon | String | 一个样式文件,它为对话框提供一个背景图 |
Buttons配置项:
提示框按钮配置对象 | 说明 |
---|---|
Ext.Msg.CANCEL | 只显示一个“取消”按钮 |
Ext.Msg.NO | 只显示一个“否”按钮 |
Ext.Msg.OK | 只显示一个“确定”按钮 |
Ext.Msg.OKCANCEL | 显示两个按钮,“确定”和“取消” |
Ext.Msg.YES | 只显示一个“是”按钮 |
Ext.Msg.YESNO | 显示两个按钮,“是”和“否” |
Ext.Msg.YESNOCANCEL | 显示三个按钮,“是”、“否”和“取消” |
图标样式说明:
样式表 | 说明 |
---|---|
Ext.Msg.ERROR | 错误图标 |
Ext.Msg.INFO | 信息图标 |
Ext.Msg.QUESTION | 问题图标 |
Ext.Msg.WARNING | 警告图标 |
调用格式:
show( Object config)
参数说明:
一个包含提示框配置信息的配置对象
返回值:
Ext.window.MessageBox
代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.MessageBox.show</title>
<link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.MessageBox.show({
title: "提示",
msg: "三个按钮、一个多行文本域",
modal: true,
prompt: true,
value: "请输入",
fn: function (id, msg) {
Ext.MessageBox.alert("单击的按钮id是:" + id + "\n" + "输入的内容是:" + msg);
},
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.QUEATION
});
});
</script>
</head>
<body>
</body>
</html>

Ext.MessageBox消息框的更多相关文章
- 94. Ext.MessageBox消息框
转自:https://www.cnblogs.com/libingql/archive/2012/03/30/2426198.html Ext JS消息提示框主要包括:alert.confirm.pr ...
- [转载]ExtJs4 笔记(6) Ext.MessageBox 消息对话框
作者:李盼(Lipan) 出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法 ...
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框
本篇演示消息对话框的用法,ExtJs封装了可能用到的各类消息框,并支持自定义的配置. 如下是用到的html: [html] <h1>各种消息框</h1> <div id= ...
- windows程序设计 MessageBox消息框
MessageBox函数 int WINAPI MessageBoxW( HWND hWnd,//窗口句柄 LPCWSTR lpText,//消息框主体显示的字符串 LPCWSTR lpCaption ...
- Delphi 7中的四种消息框
Delphi中平常使用的消息框有四种形式,有ShowMessage.MessageDlg.Application.MessageBox.MessageBox.下面来深入了解下这四种形式的实现和使用.1 ...
- Ext 消息框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- WPF自定义控件与样式(13)-自定义窗体Window & 自适应内容大小消息框MessageBox
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 自定义 ...
- 消息框用法MessageBox
关键字:C# MessageBox 消息对话框 在程序中,我们经常使用消息对话框给用户一定的信息提示,如在操作过程中遇到错误或程序异常,经常会使用这种方式给用于以提示.在C#中,MessageBox消 ...
- [WinAPI] API 2 [MessageBox API][消息框API]
/* 调用消息框 MessageBox API [peoject->set->link->project chose->subsystem:windows] */ #inclu ...
随机推荐
- Codeforces 727 F. Polycarp's problems
Description 有一个长度为 \(n\) 有正负权值的序列,你一开始有一个值,每次到一个权值就加上,最少需要删掉多少数值才能到序列末尾.\(n \leqslant 750,m \leqslan ...
- SVN权限管理
转自:http://www.cnblogs.com/xingchen/archive/2010/07/22/1782684.html /******************************** ...
- 11.1---有序数组合并(CC150)
这道题比较简单,就是通过从后往前复制大的就可以了.最后比较注意的就是如果B还没复制完要记得接着复制. import java.util.Arrays; public class Solution{ p ...
- 【leetcode】Unique Binary Search Trees
Unique Binary Search Trees Given n, how many structurally unique BST's (binary search trees) that st ...
- 【leetcode】Reverse Linked List II
Reverse Linked List II Reverse a linked list from position m to n. Do it in-place and in one-pass. F ...
- ios UIButton 选中后背景图片变化发灰问题
UIButton的类型如果选择了System类型,那么设置背景图后,点击的效果是图片发灰,而不是默认的那种图片变淡黑色效果,需要用customer类型就好了.
- Android SDK打包
2015年6月18日 14:38:49 星期四 eclipse: 1. 将写好的代码上传版本库 2. 删除 /bin/* 3. eclipse->project->clean... 4. ...
- FastReport 使用说明
FastReport TfrxReport 此为最主要的报表元件,一个 TfrxReport 元件组成一份报表.在设计时期,双击此 元件可打开报表设计器(Report Designer),此元件拥有所 ...
- MongoDB 查询优化分析
摘要: 在MySQL中,慢查询日志是经常作为我们优化查询的依据,那在MongoDB中是否有类似的功能呢?答案是肯定的,那就是开启Profiling功能.该工具在运行的实例上收集有关MongoDB的写操 ...
- Effective C++ -----条款51:编写new 和delete 时需固守常规
operator new 应该内含一个无穷循环,并在其中尝试分配内存,如果它无法满足内存需求,就该调用new-handler.它也应该有能力处理0 bytes 申请.Class专属版本则还应该处理“比 ...