`

Ext.MessageBox消息框

ext 
阅读更多
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>


　　效果图：


分享到：
| linux netstat 命令
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ext_MessageBox

    `Ext.MessageBox.show`函数允许我们创建一个完全自定义的消息框，包括设置图标、按钮等属性。 **示例代码：** ```javascript var config = { title: "dialog box", msg: "this is a diy dialog box", width: 300...

    Ext--MessageBox教程

    在EXT JS框架中，`MessageBox`是一个非常实用的组件，用于弹出对话框与用户进行交互。本教程将深入探讨`MessageBox`的使用方法及其在实际开发中的应用。EXT JS是一个强大的JavaScript库，专为构建富客户端Web应用...

    Ext messageBox hide 小应用

    `hide`方法是`Ext.messageBox`中的一个重要功能，它用于隐藏当前显示的消息框。在用户进行某些操作后，可能需要关闭消息框以清理界面，`hide`方法就是实现这一目标的关键。使用`hide`时，可以传递一个回调函数，当...

    extjs弹出框 n秒后消失

    实现EXTJS弹出框在n秒后自动消失，我们可以利用EXTJS的定时器（Ext.util.DelayedTask）和弹出框（Ext.MessageBox）的配置选项。下面我们将详细讨论如何实现这个功能。 首先，EXTJS的弹出框主要通过`Ext.MessageBox....

    ExtJs消息提示框

    2. **配置项**：`Notification`类提供了一系列配置项来定制消息框的行为和外观，如位置（top, bottom, left, right）、宽度、高度、自动关闭时间、图标、标题和内容等。 3. **创建实例**：你可以通过构造函数创建`...

    Ext.MessageBox工具类简介

    在ExtJS框架中，Ext.MessageBox是一个非常实用的工具类，它提供了弹出消息框的功能，可以用于向用户显示警告、确认、提示或请求输入等交互。这个工具类继承自`object`对象，它实际上是在当前页面上创建的一个浮动层...

    ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

    在进行Ajax请求之前，我们可以使用Ext.MessageBox确认框来询问用户是否要进行操作，并在用户确认后显示一个加载遮罩（LoadMask）。 接下来，我们通过Ext.LoadMask组件来实现加载提示。Ext.LoadMask可以对指定的DOM...

    ExtJs2指南最新版

    在本文中，我们将深入探讨ExtJS2.0中的一个重要组件——Ext.MessageBox，它提供了一种弹出对话框的方式来与用户进行交互。Ext.MessageBox提供了多种功能，如警告、确认、提示和自定义对话框，这些功能使得在Web应用...

    extjs基础教程pdf

    `Ext.MessageBox` 是ExtJS框架中的一个重要组件，主要用于创建各种类型的对话框，如警告框、确认框、提示框等。这部分内容主要介绍了`Ext.MessageBox`的四种基本用法。 ##### 1.1 Ext.MessageBox.alert() 用于显示...

    ExtJs自定义消息框

    ### ExtJs自定义消息框详解 #### 一、引言 在Web开发中，与用户的交互体验至关重要。作为一款优秀的JavaScript框架，ExtJs提供了多种工具和组件帮助开发者快速构建高质量的用户界面。其中，消息框作为一种常见的...

    learning ext js 中文版之在对话框中添加图标和按钮事件

    首先，我们需要了解EXT JS中的`Ext.MessageBox`，这是一个内置的对话框组件，可以方便地展示警告、信息、错误等各种消息，同时支持自定义内容。 在对话框中添加图标，可以利用`Ext.MessageBox.show`方法的`icon`...

    ext 教材 ext js 教程

    EXT JS 中的 MessageBox 是一个非常实用的组件，它用于创建各种类型的对话框，如警告、确认和提示。下面我们将详细探讨 EXT JS 中 MessageBox 的几个主要方法： 1. `Ext.MessageBox.alert()` `alert()` 方法用于...

    ExtJs入门实例.doc

    本文将围绕ExtJs2.0入门实例，重点讲解Ext.MessageBox的使用，包括其基本方法和配置选项，帮助初学者快速掌握这一核心功能。 1. **Ext.MessageBox.alert()** `Ext.MessageBox.alert()`方法用于显示简单的警告...

    extjs2.0学习资料

    - `icon`: 弹出框内容前面的图标，取值为 `Ext.MessageBox.INFO`、`Ext.MessageBox.ERROR` 等。 - `width`: 弹出框的宽度，不带单位。 - `prompt`: 设为 true，则弹出框带有输入框。 - `multiline`: 设为 true，...

    ExtJs2.0学习系列

    Ext.MessageBox.alert("标题", "消息"); Ext.MessageBox.alert("标题", "消息", function() { alert("关闭对话框后弹出！"); }); ``` 2. **Ext.MessageBox.confirm()** 方法 confirm 方法与 alert 类似，但...

    ext学习资料，很基础的，一步一步都很详细，希望共同学习ext

    `alert()` 方法用于显示一个简单的消息框，通常用来向用户展示一些提示信息或状态。 ```javascript // 基本用法 Ext.MessageBox.alert("标题", "消息"); // 带有回调函数的用法 Ext.MessageBox.alert("标题", "消息...

Magicbox
Global site tag (gtag.js) - Google Analytics