MessageBox为ExtJS中的消息对话框,包括alert  confirm prompt show四种。

  

1.index.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 引入css文件 -->
<link rel="styleSheet"
href="extjs/resources/css/ext-all.css">
<!-- 引入js文件 -->
<script type="text/javascript" charset="UTF-8" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript" src="index.js"></script> <title>Ext JS 4.1</title>
</head>
<body>
<h2>Ext JS 4.1</h2>
<input type="button" value="confirmShow" onclick="confirmShow();"/><br>
<input type="button" value="promptShow" onclick="promptShow();"/><br>
<input type="button" value="waitShow" onclick="waitShow();"/><br>
<input type="button" value="showShow" onclick="showShow();"/><br>
</body>
</html>

2.index.js

 Ext.onReady(function(){
Ext.Msg.alert('Status', 'Changes saved successfully.');
});
function confirmShow(){
Ext.Msg.confirm('提示信息!','输入成功!',function(op){
if(op == 'yes'){
alert('确认了!');
console.info(op);
} else {
alert('取消了!');
}
});
}
function promptShow(){
Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
if (btn == 'ok'){
Ext.MessageBox.alert('提示信息!','输入成功!输入了:'+text);
}
});
}
function waitShow(){
Ext.Msg.wait('提示信息','请等待!' ,{
interval: 100, //执行进度条的间隔时间
duration: 4000, //总时长
increment: 40, //执行进度条的次数(分几次执行)
text: '下载中,请稍后...', //进度条上的文字
scope: this,
fn: function(){
Ext.MessageBox.alert('提示信息!','下载成功!');
//Ext.MessageBox.hide();
},
animate:true //动画效果
});
}
function showShow(){
Ext.Msg.show({
title:'自定义提示框' ,
msg:'内容' ,
width:300 ,
height:200 ,
buttons:Ext.Msg.YES ,//OKCANCEL YESNOCANCEL YES NO
icon:Ext.Msg.WARNING // ERROR INFO QUESTION WARNING
});
}

ExtJS学习之MessageBox的更多相关文章

  1. ExtJs学习之MessAgeBox的使用

    1.Ext.MessageBox.alert() 调用格式: alert( String title, String msg, [Function fn], [Object scope] ) 参数说明 ...

  2. ExtJs学习之Window

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. ExtJs学习笔记之学习小结LoginDemo

    ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  4. ExtJS学习第一天 MessageBox

    此文用来记录学习笔记: •学习任何技术,首先都要从Helloworld开始,那么我们首要任务就是写一个简单的HelloWorld程序,带领同学们走进ExtJS的世界. •Ext.onReady:这个方 ...

  5. ExtJS学习之路第四步:看源码,实战MessageBox

    可以通过看MessageBox.js的源码来深入认识,记住它的主要用法.Ext.MessageBox是实用类,用于生成不同风格的消息框,它是Singleton(单例),别名Ext.Msg.注意Mess ...

  6. Extjs 学习笔记1

    学习笔记 目   录 1 ExtJs 4 1.1 常见错误处理 4 1.1.1 多个js文件中有相同的控件,切换时无法正常显示 4 1.1.2 Store的使用方法 4 1.1.3 gridPanel ...

  7. ExtJS学习之路第五步:认识最常见组件Panel

    文档中描述 Panel(面板)是一个容器,它具有特定的功能和结构部件,这使它成为面向应用用户界面的完美基石.面板,继承自Ext.container.Container,能够配置布局以及子组件(Chil ...

  8. extjs 学习笔记(二)

    EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...

  9. ExtJS学习

    ExtJS是一门比较纠结的框架,自己不太熟,因为现在在做一些老项目,所以没办法要学点.记录下.其实Ext也不是很难,主要是多查查API,了解其基本的用法,然后慢慢去学习,学成之后做管理系统还是很有优势 ...

随机推荐

  1. Liferay7 BPM门户开发之20: 理解Asset Framework

    Asset框架用于将您开发的门户内容添加Liferay的核心系统功能.打个比方,你开发了一个事件TodoList管理的插件,在列表显示的时候,你可以集成Asset框架,让你的自定义内容支持Tag标签. ...

  2. python(33)——【re模块】

    re模块(正则表达式) 就其本质而言,正则表达式是一种小型的.高度专业化的编程语言 在Python中(它内嵌在python中),并通过re模块来实现,正则表达式被编译成一系列的字节码,然后由C编写的匹 ...

  3. Django model update的各种用法介绍

    Django开发过程中对表(model)的增删改查是最常用的功能之一,本文介绍笔者在使用model update过程中遇到的那些事 model update常规用法 假如我们的表结构是这样的 clas ...

  4. apache和tomcat的区别和联系

    两者既有联系又有区别,是两个软件,可独立使用,也可整合使用.Apache是web服务器(静态解析,如HTML),本身只支持html,Web服务器专门处理HTTP请求(request),可以通过插件支持 ...

  5. web自动化测试---测试环境的部署

    当前我的测试环境配置如下: python3.6 下载地址: https://www.python.org/downloads/release/python-365/ 选择windows版本,下载完成后 ...

  6. 首个hybird商业项目踩坑总结

    该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...

  7. IE不支持 Promise 解决办法

    引入 <script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script> 或 < ...

  8. 从零开始学 Web 之 JavaScript(三)函数

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  9. TCP/IP 笔记 - DHCP和自动配置

    动态主机配置协议(DHCP),一个局域网的网络协议,使用UDP协议工作,用于局域网中集中管理.分配IP地址. DHCP介绍 DHCP有两个主要部分组成:地址管理和配置数据交付.地址管理用于IP地址的动 ...

  10. scala-jdbc-scalike操作jdbc数据库

    1, 引入maven依赖 <!-- 使用 sclaikeJDBC --> <dependency> <groupId>org.scalikejdbc</gro ...