94. Ext.MessageBox消息框
转自:https://www.cnblogs.com/libingql/archive/2012/03/30/2426198.html
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>

效果图:
94. Ext.MessageBox消息框的更多相关文章
- Ext.MessageBox消息框
Ext JS消息提示框主要包括:alert.confirm.prompt.show 1.Ext.MessageBox.alert() 调用格式: alert( String title, String ...
- [转载]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 ...
随机推荐
- 集合Set、List、Map的遍历方法
package com.shellway.javase; import java.util.ArrayList; import java.util.Collection; import java.ut ...
- struts2.5.2 通配符问题_亲测有用
学了一段时间struts2,跟着教程做,但发现struts2的版本不同,很多东西的使用是有差异的.例如之前遇到的创建sessionFactory的方式就跟之前版本有着明显的差异.今天又遇到一个问题,那 ...
- Windows 8 常见教程
http://www.codeproject.com/Articles/439874/Web-service-on-Windows-Phone http://www.c-sharpcorner.com ...
- 一台电脑同时使用多个Git账号
参照 https://my.oschina.net/u/3578363/blog/2209781
- c/c++排坑(3) -- c/c++中的switch语句
switch语句的简单介绍 一个 switch 语句允许测试一个变量等于多个值时的情况.每个值称为一个 case,且被测试的变量会对每个 switch case 进行检查. switch(expres ...
- Ubuntu 18.04 nvidia driver 390.48 安装 TensorFlow 1.12.0 和 PyTorch 1.0.0 详细教程
最近要在个人台式机上搭建TensorFlow和PyTorch运行环境,期间遇到了一些问题.这里就把解决的过程记录下来,同时也可以作为安装上述环境的过程记录. 如果没有遇到类似的问题,想直接从零安装上述 ...
- Django——11 状态保持 form表单 登陆注册样例
Django 状态保持 用户状态例子 实现注册登陆实例 django forms 表单的使用 注册功能 登陆功能 状态保持cookie和session 1.http协议是无状态的:每次请求都是一次 ...
- Django——2 路由分配设置 re_path正则匹配 include总路由 url传参 name使用 模板渲染render方法 模板渲染方法
Django 路由分配设置 re_path正则匹配 include总路由设置 url额外参数的传递 name的使用 模板的渲染:render方法 路由的分配中, 可以设定相应的转换器加以约束,比如 ...
- Leetcode 48.旋转矩阵
旋转矩阵 给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要使用另一个矩阵来旋转图像. 示例 1: ...
- [bzoj3450]Tyvj1952 Easy[概率dp]
和之前一样考虑这个音符时x还是o,如果是x,是否是新的连续一段,对答案的贡献是多少$(a^2-{(a-1)}^2)$,然后递推就可以了. #include <bits/stdc++.h> ...