程序博客网 > 摩根币是网络传销吗

Ext.MessageBox消息框

来源：互联网 发布：摩根币是网络传销吗 编辑：程序博客网 时间：2024/05/21 12:40

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>
复制代码

　　效果图：

              

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------分割线---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------                             

                                  Ext.MessageBox 消息对话框

 

如下是用到的html：

[html]
1
2
3
4
5
6
7
8
9
<h1>各种消息框</h1>
<div id="div1" class="content">
<button id="bt1" type="button" >Confirm</button>
<button id="bt2" type="button" >Prompt</button>
<button id="bt3" type="button" >DIY窗口</button>
<button id="bt4" type="button" >进度条</button>
<button id="bt5" type="button" >进度条2</button>
<button id="bt6" type="button" >wait</button>
</div>

一、警告对话框和确认对话框

展示一个带“是”，“否”按钮的确认对话框。当单击按钮时，执行回调函数，获取按钮类型，并弹出一个警告对话框。

[Js]
1
2
3
4
5
Ext.get("bt1").on("click", function () {
    Ext.MessageBox.confirm("标题", "详细信息内容", function (btn) {
        Ext.Msg.alert("提示", "你点击了" + btn + "按钮");
    });
});

效果展示：

    

    

二、输入对话框

展示一个带文本框的对话框，可以供用户录入。单击按钮后可以获取文本框的内容。

[Js]
1
2
3
4
5
6
7
8
9
10
11
Ext.get("bt2").on("click", function () {
    Ext.MessageBox.prompt(
    "标题",
    "详细信息内容",
    function (btn, text) {
        Ext.Msg.alert("提示", "你点击了" + btn + "按钮,获取的文本：" + text);
    },
    this,
    true,       //表示文本框为多行文本框
    "初始文本");
});

效果展示：

     


三、自定义DIY对话框

展示一个自定义的对话框，可以定义图标样式，按钮组的类型，是否带文本框，是否带进度条等信息。

[Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Ext.get("bt3").on("click", function () {
    Ext.MessageBox.show({
        title: "标题",
        msg: "详细信息内容",
        buttons: Ext.MessageBox.YESNOCANCEL,    //对话框的按钮组合
        multiline: false,                       //有文本框时，是否为多行文本框
        closable: false,                        //是否可关闭
        prompt: true,
        icon: Ext.MessageBox.WARNING,
        iconCls: "add16",
        width: 400,
        proxyDrag: true,
        value: "初始文本",
        progress: true,
        progressText: "加载中..",
        animateTarget: "bt3"
    });
});

效果展示：

      


四、加载进度条对话框

展示一个带加载进度条的对话框，提示当前执行任务的进度信息。

[Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Ext.get('bt4').on('click', function () {
    Ext.MessageBox.show({
        title: '加载窗口',
        msg: '详细信息内容',
        progressText: '加载中...',
        width: 300,
        progress: true,
        closable: false,
        animateTarget: 'bt4'
    });
 
    //模拟加载环境
    var f = function (v) {
        return function () {
            if (v == 12) {
                Ext.MessageBox.hide();
                Ext.Msg.alert("提示", "加载完毕！");
            } else {
                var i = v / 11;
                Ext.MessageBox.updateProgress(i, Math.round(100 * i) + '% 完成');
            }
        };
    };
    for (var i = 1; i < 13; i++) {
        setTimeout(f(i), i * 200);
    }
});

效果展示：

     


五、等待进度条对话框

展示等待进度条的对话框，提示用户当前正在等待某一任务执行。

[Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Ext.get('bt5').on('click', function () {
    Ext.MessageBox.show({
        msg: '正在保存数据..',
        progressText: '保存中...',
        width: 300,
        wait: true,
        waitConfig: { interval: 200 },
        icon: 'download',
        animateTarget: 'bt5'
    });
    setTimeout(function () {
        Ext.MessageBox.hide();
        Ext.Msg.alert("提示", "保存完毕！");
    }, 3000);
});

效果展示：

     


六、基本的等待对话框

这里演示基本的等待对话框的实现方式。

[Js]
1
2
3
4
5
6
7
8
9
Ext.get('bt6').on('click', function () {
    Ext.MessageBox.wait("详细信息内容", "标题", {
        interval: 100       //进度条加载速度
    });
    setTimeout(function () {
        Ext.MessageBox.hide();
        Ext.Msg.alert("提示", "完毕！");
    }, 35000);
});

效果展示：

     

阅读全文
0 0
摩根币是网络传销吗 摩根币是网络传销吗
原创粉丝点击
热门IT博客
用lededit编程两个不同用lededit编程两个不同
小米抢购软件 2016小米抢购软件 2016
linux设置目录权限
mac p ro u盘读不出来
k均值聚类算法 python
netgear 网络设置
ios 虚拟定位软件
淘宝显示该商品已下架
苹果mac怎么截图
知乎回答是怎么排名的
php aes加密解密算法
xp网络共享无访问权限
飞机设计软件
python中的itertools
网络解析被劫持 翻墙
淘宝之前的购物网站
2017淘宝评价规则
惠普暗影精灵3优化
数据分析应用
淘宝上传凭证没反应
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 集市歌曲 集市英文 集市图片 创意集市 数据集市 集市下载 淘宝集市 后备箱集市 妈妈集市 玛莎集市 集市英语 狗狗集市 鹦鹉集市 斯卡布罗集市 斯卡布罗集市原唱 斯卡布罗集市简谱 斯卡布罗集市的故事 斯卡布罗集市歌词 斯卡布罗集市故事 popo原创集市 斯布罗卡集市原唱 威海集市时间表 威海集市时间表2019 斯卡布罗集市原唱高清 保卫萝卜3集市 龙口集市一览表 日照集市时间表 斯卡布罗集市吉他谱 蚂蚁集市首页 莱芜集市时间表 斯卡保罗集市简谱 斯卡保罗集市歌词 斯卡保罗集市吉他独奏 斯卡保罗集市原唱 斯卡波罗集市原唱 斯卡保罗集市中文版 斯卡保罗集市吉他谱 九阴真经集市 卡斯布罗集市 牧场物语风之集市 2019保卫萝卜3集市完整攻略图

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里