ExtJS Ext.MessageBox

来源：互联网发布：网络攻防编辑：程序博客网时间：2024/05/21 09:25

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常用配置项：

配置项类型说明titleString提示框标题msgString显示的消息内容widthNumber对话框的宽度，以px为单位maxWidthNumber对话框的最大宽度，默认为600pxminWidthNumber对话框的最小宽度，默认为100pxclosableBooleanfalse将隐藏右上角的关闭按钮，默认为truemodalBooleantrue为模态窗口，false为非模式窗口fnFunction

回调函数

参数说明：

buttonId：按钮id

text：输入的文字

opt：传入show方法的配置对象

buttonsNumber/Boolean按钮组，默认为false，不显示任何按钮progressBooleantrue则显示一个进度条，默认为false，该进度条需要由程序控制滚动progressTextString进度条上显示的文字，默认为“”proxyDragBooleantrue则显示一个highlight拖动代理，默认为falsewaitBooleantrue则显示一个自动滚动的进度条，默认为falsewaitConfigObject等待进度条的配置对象，在wait为true时有效promptBooleantrue则显示一个单行文本域，默认为falsevalueString如果prompt设置为true，则value值将显示在文本域中multilineBoolean如果prompt设置为true，则multiline为true显示多行文本域，false显示单行文本域defaultTextHeightNumber多行文本域的默认高度，默认值为75pxiconString一个样式文件，它为对话框提供一个背景图

　　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>

　　效果图：

阅读全文

0 0