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>
时间： 2024-10-09 21:14:03