实用ExtJS教程100例-002:MessageBox的三种用法

简介:
+关注继续查看

在上一节中,我们用到了MessageBox,在本文中,我们将介绍一下ExtJS中常用的三种MessageBox。

Ext.MessageBox.alert()

这个方法用来打开一个普通的对话框,对话框中只显示一个确定按钮。

Ext.get("btn1").on("click", function () {
    Ext.MessageBox.alert("提示", "按钮被点击");
});
  • 第一个参数为标题栏
  • 第二个参数为内容

效果如下图查看在线示例

image

Ext.MessageBox.confirm()

这个方法将打开一个包含yes/no按钮的对话框,通常用来提示用户是否要执行敏感操作(例如删除数据等,需要用户再次确认,防止误操作)

Ext.get("btn2").on("click", function () {
    Ext.MessageBox.confirm("提示", "是否要跳转页面?", function (btnId) {
        if (btnId == "yes") {
            alert("点击了yes按钮");
        }
        else if (btnId == "no") {
            alert("点击了no按钮");
        }
        else {
            alert("没有点击按钮,关闭了提示框");
        }
    });
});

这个方法的回调函数包含了btnId参数,参数值可以是yes或no。

效果如下图查看在线示例

image

Ext.MessageBox.prompt()

接下来是第三种对话框,这中对话框中包含一个输入框和ok/cancel按钮。在回调函数中我们可以处理用户的输入,回调函数中包含了btnId和text两个可用的参数,示例代码如下:

Ext.get("btn3").on("click", function () {
    Ext.MessageBox.prompt("提示", "请输入用户名", function (btnId, text) {
        if (btnId == "ok") {
            alert(text);
        }
        else {
            alert("点击了取消按钮");
        }
    });
});

在用户输入了文字并点击确定按钮以后,我们将会弹出对话框。

查看在线示例

image

另外,这个方法还允许创建一个多行的输入框,代码如下:

Ext.MessageBox.prompt("提示", "请输入用户名", function (btnId, text) {
    if (btnId == "ok") {
        alert(text);
    }
    else {
        alert("点击了取消按钮");
    }
}, window, true);

第三个参数window是默认的作用域

第四个参数是否为多行输入框,传入true就表示可以输入多行文字

运行效果如下查看在线示例

image

最后一个功能是,如果我们需要在打开的时候显示一段默认文字,我们可以传入第五个参数,代码如下:

Ext.MessageBox.prompt("提示", "请输入用户名", function (btnId, text) {
    if (btnId == "ok") {
        alert(text);
    }
    else {
        alert("点击了取消按钮");
    }
}, window, true, "这是默认文字");

运行效果如下查看在线示例

image

OK,常用的三种对话框已经完成了。

本文还发布在了ExtJS教程网站起飞网上面,如果转载请保留本段声明,谢谢合作。




本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/p/extjs-100-examples-002-messagebox.html,如需转载请自行联系原作者

相关文章
|
3月前
|
前端开发
jq书写点击换图
jq书写点击换图
20 0
|
4月前
|
SQL JavaScript 关系型数据库
学习jQuery笔记
学习jQuery笔记
34 0
|
11月前
|
JSON JavaScript 前端开发
zTree 插件的入门程序 | 学习笔记
快速学习 zTree 插件的入门程序
150 0
zTree 插件的入门程序 | 学习笔记
Java——集合中的工具类Collections的一些常用方法
Java——集合中的工具类Collections的一些常用方法
Java——集合中的工具类Collections的一些常用方法
|
JavaScript 前端开发
Javascript 返回指定的字符串首次出现的位置
Javascript 返回指定的字符串首次出现的位置
1306 0
Javascript 返回指定的字符串首次出现的位置
|
JavaScript 前端开发 关系型数据库
|
前端开发 JavaScript 容器
|
Web App开发 移动开发 前端开发
|
Web App开发 JavaScript 前端开发
|
JavaScript 关系型数据库 MySQL
kbmmw 与extjs 的初次结合
前面写了extjs 的安装,今天写一下kbmmw 与extjs 的结合,参照delphi 产品经理marco文章 。 由于extjs 设计时要读取服务器端的数据,所以先要做一个rest 服务器。 先要用kbmmw 建一个web 服务器,可以参照我以前写的例子。
1211 0
相关产品
云迁移中心
推荐文章
更多