ExtJS学习之MessageBox
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的更多相关文章
- ExtJs学习之MessAgeBox的使用
1.Ext.MessageBox.alert() 调用格式: alert( String title, String msg, [Function fn], [Object scope] ) 参数说明 ...
- ExtJs学习之Window
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- ExtJs学习笔记之学习小结LoginDemo
ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- ExtJS学习第一天 MessageBox
此文用来记录学习笔记: •学习任何技术,首先都要从Helloworld开始,那么我们首要任务就是写一个简单的HelloWorld程序,带领同学们走进ExtJS的世界. •Ext.onReady:这个方 ...
- ExtJS学习之路第四步:看源码,实战MessageBox
可以通过看MessageBox.js的源码来深入认识,记住它的主要用法.Ext.MessageBox是实用类,用于生成不同风格的消息框,它是Singleton(单例),别名Ext.Msg.注意Mess ...
- Extjs 学习笔记1
学习笔记 目 录 1 ExtJs 4 1.1 常见错误处理 4 1.1.1 多个js文件中有相同的控件,切换时无法正常显示 4 1.1.2 Store的使用方法 4 1.1.3 gridPanel ...
- ExtJS学习之路第五步:认识最常见组件Panel
文档中描述 Panel(面板)是一个容器,它具有特定的功能和结构部件,这使它成为面向应用用户界面的完美基石.面板,继承自Ext.container.Container,能够配置布局以及子组件(Chil ...
- extjs 学习笔记(二)
EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...
- ExtJS学习
ExtJS是一门比较纠结的框架,自己不太熟,因为现在在做一些老项目,所以没办法要学点.记录下.其实Ext也不是很难,主要是多查查API,了解其基本的用法,然后慢慢去学习,学成之后做管理系统还是很有优势 ...
随机推荐
- Fetch的使用及兼容ie的处理
Fetch 作为一个与时俱进的前端,Fetch当然应该有所了解和涉猎.如果你没有听说过Fetch,那么ajax应该不陌生吧.Fetch相当于是一个新版本的Ajax,虽然现在我们常常使用的仍是ajax, ...
- php cli模式和浏览器访问下加载php.ini文件的注意事项[架构篇]
使用wampserver或Xampp时,会将配置文件放在一个统一的目录中去调用,这时如果都使用浏览器访问,自然是没有问题的,但是如果换成cli命令行模式运行,则会出现加载了的扩展无法使用的问题. 案例 ...
- 音频科普---oggs
做为一个做音频的人,很多基础的东西还是要牢记的.最近一个客户用ogg格式的音频,感觉这个很陌生,就翻了这方面的 资料.好比是认识一个大牛,只有在你有一个困扰你很久的困难问题被他瞬间解决的时候,才知道什 ...
- 剑指offer【01】- 二维数组中的查找(Java)
在经历了春招各大公司的笔试题和面试官的血虐之后,决定要刷一些算法题了,不然连面试机会都没有. 而应对笔试和面试,比较出名的就是剑指offer的题目和LeetCode的题目了.剑指offer应对面试中的 ...
- ubuntu18.04 运行时提示缺少libstdc++.so.6
解决方法:输入命令 sudo apt- 提示:ubuntu默认软件包管理器不是yum,而是dpkg,安装软件时用apt-get PS:在ubuntu下最好不要去装yum,不然可能会出现一些奇怪的问题
- welcome-file-list修改后不生效
用别的浏览器重新尝试一下,或者清缓存.我就是这样解决的.值得注意的就是,<welcome-file>里面指定的文件可以是.do或者是action.
- 从零开始学 Web 之 移动Web(四)实现JD分类页面
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- SaltStack 安装、简单配置和远程执行
1:安装 修改hosts文件,必须保证Master端和Minion端都有完整的FQDN名示例如下: vim /etc/hosts 192.168.31.101 node2 node2.crazylin ...
- Scrollanim – CSS3 & JavaScript 创建滚动动画
Scrollanim 是结合 CSS3 和 JavaScript 来创建令人惊叹的滚动动画的开源库. Scrolanim 支持在页面上的所有可用的元素的位置.有很多的自定义参数可以配置使用,构建出精彩 ...
- netty源码解解析(4.0)-6 线程模型-IO线程EventLoopGroup和NIO实现(一)
接口定义 io.netty.channel.EventLoopGroup extends EventExecutorGroup 方法 说明 ChannelFuture register(Channel ...