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> ...

94. Ext.MessageBox消息框

94. Ext.MessageBox消息框的更多相关文章

随机推荐

热门专题