实用ExtJS教程100例-002:MessageBox的三种用法
在上一节中,我们用到了MessageBox,在本文中,我们将介绍一下ExtJS中常用的三种MessageBox。
Ext.MessageBox.alert()
这个方法用来打开一个普通的对话框,对话框中只显示一个确定按钮。
Ext.get("btn1").on("click", function () {Ext.MessageBox.alert("提示", "按钮被点击"); });
- 第一个参数为标题栏
- 第二个参数为内容
效果如下图【查看在线示例】:
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。
效果如下图【查看在线示例】:
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("点击了取消按钮");}}); });
在用户输入了文字并点击确定按钮以后,我们将会弹出对话框。
【查看在线示例】
另外,这个方法还允许创建一个多行的输入框,代码如下:
Ext.MessageBox.prompt("提示", "请输入用户名", function (btnId, text) {if (btnId == "ok") {alert(text);}else {alert("点击了取消按钮");} }, window, true);
第三个参数window是默认的作用域
第四个参数是否为多行输入框,传入true就表示可以输入多行文字
运行效果如下【查看在线示例】:
最后一个功能是,如果我们需要在打开的时候显示一段默认文字,我们可以传入第五个参数,代码如下:
Ext.MessageBox.prompt("提示", "请输入用户名", function (btnId, text) {if (btnId == "ok") {alert(text);}else {alert("点击了取消按钮");} }, window, true, "这是默认文字");
运行效果如下【查看在线示例】:
OK,常用的三种对话框已经完成了。
本文还发布在了ExtJS教程网站起飞网上面,如果转载请保留本段声明,谢谢合作。
转载于:https://www.cnblogs.com/youring2/p/extjs-100-examples-002-messagebox.html
实用ExtJS教程100例-002:MessageBox的三种用法相关推荐
- 实用ExtJS教程100例-004:等待对话框Ext.MessageBox.wait
在前面两节中,我们分别演示了ExtJS三种常用的对话框和ExtJS带有进度条的对话框.在本节内容中,我们来看看ExtJS中的等待对话框. 首先来看一个简单的例子[查看在线示例]: 这种对话框会一直滚动 ...
- 实用ExtJS教程100例-006:ExtJS中Window的用法示例
在前面几个示例中,我们演示了MessageBox的各种用法,今天这篇文章将演示如何使用Window. 我们首先来创建一个窗口: var win = Ext.create("Ext.windo ...
- 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传
文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...
- java浮点数化为整数_[Java教程]javascript浮点数转换成整数三种方法
[Java教程]javascript浮点数转换成整数三种方法 0 2014-06-24 04:00:27 将浮点数转换成整数方法有很多,分享三种常用方法. Summary 暂时我就想到3个方法而已.如 ...
- PhotoShop PS 新手 高手 终极 教程 100例
http://www.missyuan.com/thread-446934-1-1.html Photoshop绘制逼真头发发丝效果 http://www.missyuan.com/thread-44 ...
- Win11的两个实用技巧系列之解决dns异常的三种方法、win10/win11卡顿的三种解决办法
电脑dns异常怎么修复win10? Win10解决dns异常的三种方法 电脑dns异常怎么修复win10?最近有很多win10用户遇到dns配置错误的问题,这让用户非常苦恼,下面我们就来看看Win10 ...
- ps自定义形状工具_PS教程——用PS绘制虚线的三种方法
点线面是平面构成的基本元素,而线条在平面设计中亦有规整分割版面.装饰造型的作用,能大幅提升版面的可读性.学会用PS绘制线条是每个自学平面设计初学者的基本功,本篇平面设计学习日记, @酷coo豆一孔之见 ...
- python菜鸟教程100例-对菜鸟教程的Python一百例的个别改进
开篇语 好吧,其实是我小妹子Python公选课结课,所以我来帮忙做个大作业(简单到哭的大作业好吗?)!她的大作业就是老师把菜鸟教程的Python一百例扒下来做成文档,然后让学生自己找三个验证下!我们当 ...
- python菜鸟教程100例-Python 练习实例4
#19 ym 853***877@qq.com 10 参考解法: #!/usr/bin/python # -*- coding: UTF-8 -*- year=int(raw_input(" ...
最新文章
- Repository模式
- Linux对运行服务操作命令
- Java开发必须掌握的 20+ 种 Spring 常用注解
- The requested URL /**** was not found on this server
- MS CRM 2011 Form与Web Resource在JScript中的相互调用
- 使用增量备份修复DG中的GAP
- React开发(106):getFieldDecorator不能包裹太多div
- 继承中的复制构造、赋值、析构、重载
- mysql 查询语句_MySQL查询语句之复杂查询
- 计算机一级第103套题,全国计算机等级考试一级试题
- 基于消息的异步套接字
- 硬核干货:你从普通码农到架构师的封神之路
- 使用Word的VBA功能过滤敏感词,实现网络文章过审
- 读书笔记-人月神话16
- 为什么低通滤波器的作用相当于积分器
- 江苏卫视舞蹈演员机器人_百度机器人踢馆江苏卫视《芝麻开门》
- 2022 美亚杯 团体赛AGC部分+资格赛服务器部分 所有服务器部分解题思路
- 微信小程序接入环信客服
- SVN冲突 One or more files are in a conflicted state
- Flexl连接外部的URL
热门文章
- 复习1 - String,StringBuilder,StringBuffer的执行效率区别
- 【译】Byzantine Fault Tolerance in Proof-of-stake protocols
- Android 7.0 Keyguard流程分析
- 【问链-Eos公开课】第四课 EOS 的钱包创建、导入私钥
- 一行命令搞定node.js 版本安装、升级与卸载
- php处理heic格式图片,iPhone 照片为heic格式怎么处理?
- vs找不到dll_零基础学习Python_绝对VS相对
- Data Mining的十种分析方法
- 破解xp(sp2)密码
- ECCV 2020 《Improving One-stage Visual Grounding by Recursive Sub-query Construction》论文笔记