Ext各种对话框
<HTML>
<HEAD>
<TITLE>选择确认对话框</TITLE>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="Ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script>
</HEAD>
<script type="text/javascript">
function start(){
//选择确认对话框和传统的JS一样使用的是Confirm函数，但是在Ext中这些对话框被统一归结到Message下面:“Ext.MessageBox.confirm("对话框的标题","对话框消息正文");”,如果为其提供一个回调函数，则该函数将在单击按钮后被调用(包括右上角的退出按钮)，所单击按钮的id将被作为唯一的参数传递到回调函数中。使用方法是在confirm的参数第三个位置加上回调函数名，然后下面完成这个回调函数，定义一个参数接收用户的选择结果，然后可以根据选择来作出判断。
Ext.MessageBox.confirm("选择框", "你到底是选yes还是no?", callback);
function callback(id) {
if (id == "yes") {
Ext.MessageBox.alert("提示","你点了确定");
} else {
Ext.MessageBox.alert("提示", "你点了取消?");
}
}
}
Ext.onReady(start);
</script>
<BODY>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>带输入的确认对话框</TITLE>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="Ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script>
</HEAD>
<script type="text/javascript">
function msg() {
//带输入的确认对话框，用的是prompt，和上个效果一样，也需要定义回调函数用来接收用户操作的结果，同时还有用户输入的内容。
Ext.MessageBox.prompt("提示", "随便写点什么吧！", callback);
function callback(id, text) {
if (id == "ok") {
Ext.MessageBox.alert("提示","你输入的是：" + text);
} else {
Ext.MessageBox.alert("提示","你已经取消了输入！");
}
}
}
Ext.onReady(msg);
</script>
<BODY>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>带多行文本输入框的对话框</TITLE>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="Ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script>
</HEAD>
<script type="text/javascript">
function msg() {
//带多行文本输入框的对话框，这个例子实现思路需要变化一下，使用自定义对话框，原因是原生JS中本来就没有多行文本框这一说。而且接收返回值的思路需要变化。
Ext.MessageBox.show({
title: '标题', msg: '要显示的内容',
width: 300, buttons: Ext.MessageBox.OKCANCEL,
// icon:Ext.MessageBox.INFO,//显示图标
icon: "ic",
multiline: true,
fn: callback//这个是Ext专属属性，用来指示处理函数名
});
function callback(id, text) {
Ext.MessageBox.alert(text);
}
}
Ext.onReady(msg);
</script>
<BODY>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>多个按钮选择的对话框</TITLE>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="Ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script>
</HEAD>
<script type="text/javascript">
function msg() {
//显示多个按钮供客户选择，用于多条件处理的情况。
Ext.MessageBox.show({
title: '标题', msg: '要显示的内容',
buttons: { yes: true, no: true, cancel: true },
// buttons: { yes: "是啊", no: "不啊", cancel: "取消了啊" },
fn: callback//这个是Ext专属属性，用来指示处理函数名
});
function callback(id) {
Ext.MessageBox.alert("提示","你选择的是"+id);
}
}
Ext.onReady(msg);
</script>
<BODY>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>进度条对话框</TITLE>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="Ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script>
</HEAD>
<script type="text/javascript">
function msg() {
//关于进度条，有两种实现思路，一是按大小确定，一是按时间确定。本例完成按大小控制进度条
Ext.MessageBox.show({
title: '请稍等',
msg: '加载中...',
width: 300,
progress: true,
closable: false
});
var f = function (v) {
return function () {
if (v == 12) {
Ext.MessageBox.hide();
Ext.MessageBox.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 * 500);
}
}
Ext.onReady(msg);
</script>
<BODY>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>选择确认对话框</TITLE>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="Ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script>
<script type="text/javascript">
function extAlert(){
//Ext.MessageBox.alert("title","msg");
Ext.Msg.alert("title","msg");
}
function extConfirm(){
//传统方式
/*
var ret;
ret = confirm('是否继续？');
if(ret){
alert("继续");
}else{
alert("不继续");
}
*/
//Ext.MessageBox.confirm("选择框", "你到底是选yes还是no?", callback);
Ext.Msg.confirm("友情提示", "数据删除后不能恢复，是否真要删除？",getResult); } function getResult(btn){
console.dir(arguments);
if (btn == "yes") {
Ext.MessageBox.alert("提示","你点了确定");
} else {
Ext.MessageBox.alert("提示", "你点了取消?");
}
} var v = "this is window";
var b1 = { v : "this is b1"};
function showResult(btn,text){
if (btn == "ok") {
Ext.MessageBox.alert("提示","你输入的是：" + text +"<br>" + this.v);
} else {
Ext.MessageBox.alert("提示","你已经取消了输入！");
}
}
function extPrompt(){
//传统的
/*
var ret = prompt("请输入XXX：");
alert(ret);
*/
//Ext.MessageBox.prompt("提示", "随便写点什么吧！", callback);
//Ext.Msg.prompt("提示", "随便写点什么吧！", showResult);
Ext.Msg.prompt("提示", "随便写点什么吧！", showResult,b1,50,"defalt text"); } function extWait(){
var ret = Ext.Msg.wait("正在进行处理，请稍候...");
setTimeout(function(){ret.hide();},3000);
} function extProgress(){
var ret = Ext.Msg.progress("处理进度","进度：");
var r = 0;
var timer = setInterval(function(){
ret.updateProgress(r+=0.2,r*100+"%"); },500);
setTimeout(function(){
clearInterval(timer);
},5000); }
//自定义对话框
function extCustomDialog(){
Ext.Msg.show({
title:"保存数据",
msg:"你已经做了一些操作，是否要保存当前内容的修改？",
buttons:Ext.Msg.YESNOCANCEL,
fn:doSave,
icon:Ext.MessageBox.QUESTION }); } function doSave(button,text){
if(button=="yes"){
//执行数据保存操作
}else if(button == "no"){
//执行不保存操作
}else{
//执行取消操作
}
}
</script>
</HEAD>
<BODY>
传统对话框<br>
<a href="javascript:alert('123');">alert</a>
<br>
<a href="#" onclick="confirm('是否继续？');">confirm确认对话框</a>
<br>
<a href="javascript:prompt('请输入XXX：');">prompt输入对话框</a>
<br>
Ext对话框<br>
<a href="javascript:extAlert()">alert</a>
<br>
<a href="#" onclick="extConfirm();">confirm确认对话框</a>
<br>
<a href="javascript:extPrompt();">prompt输入对话框</a>
<br>
<a href="javascript:extWait();">wait对话框</a>
<br>
<a href="javascript:extProgress();">进度条对话框</a>
<br>
<a href="javascript:extCustomDialog();">自定义对话框</a>
</BODY>
</HTML>
自定义对话框也可以定义对话框的图标，只需要加上：“icon:Ext.MessageBox.INFO,//显示图标”，即可。同时也可以自定义图标，显示成你需要的图片，
实现思路是：
1. 先定义一个类样式，指定背景图片地址和不平铺；
2. 在icon属性中引入类样式名；
Ext各种对话框的更多相关文章
- Ext入门学习系列（四）面板控件
第四章 使用面板 上节学习了Ext复杂对话框,更进一步了解了Ext的运行机制.本章重点来了解Ext所有控件的基础——面板控件. 一.Ext的面板是什么? 同样先来看看几个效果: 基本面板,点击右上角小 ...
- extjs 学习笔记（二）
EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...
- 03_Ext_Viewport_Window_Dialog
Viewport Viewport 代表整个浏览器窗口,直接渲染到document.body节点,取代页面中的所有内容.一般作为应用程序主界面. 随着浏览器显示区域的大小自动改变,一个页面中只能有一个 ...
- [转载]ExtJs4 笔记（6） Ext.MessageBox 消息对话框
作者:李盼(Lipan) 出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法 ...
- Ext信息提示对话框
Ext.window.MessageBox是一个工具类,他继承自Ext.window.Windoe对象,用来生成各种风格的信息提示对话框,其实例对象可以通过Ext.MessageBox或Ext.Msg ...
- ExtJs4 笔记（6） Ext.MessageBox 消息对话框
本篇演示消息对话框的用法,ExtJs封装了可能用到的各类消息框,并支持自定义的配置. 如下是用到的html: [html] <h1>各种消息框</h1> <div id= ...
- 实用ExtJS教程100例-005：自定义对话框Ext.MessageBox.show
我们对ExtJS对话框进行了三篇演示: MessageBox的三种用法 进度条对话框Ext.MessageBox.progress 等待对话框Ext.MessageBox.wait 通过上面三篇内容的 ...
- 实用ExtJS教程100例-004：等待对话框Ext.MessageBox.wait
在前面两节中,我们分别演示了ExtJS三种常用的对话框和ExtJS带有进度条的对话框.在本节内容中,我们来看看ExtJS中的等待对话框. 首先来看一个简单的例子[查看在线示例]: 这种对话框会一直滚动 ...
- 实用ExtJS教程100例-003：进度条对话框Ext.MessageBox.progress
在上一篇内容中我们介绍了三种常用的MessageBox提示框,在这篇文章中,我们将演示如何在对话框中使用进度条. 进度条对话框 我们可以使用下面的代码来在MessageBox中显示一个进度条: Ext ...
随机推荐
- EL（表达式）语言的几种运算符
1.EL的基本语法 (1)EL表达式语法:以${开头,以}结束,中间为合法的表达式,具体语法格式如下: ${expression} (2)参数说明:Expression:指定要输出的内容,可以是字符串 ...
- python 多线程， 多进程， 协程
1. 介绍: threading用于提供线程相关的操作,线程是应用程序中工作的最小单元.python当前版本的多线程库没有实现优先级.线程组,线程也不能被停止.暂停.恢复.中断. 2. 1 线程执行 ...
- 字节对齐&&sizeof
转:http://blog.chinaunix.net/uid-722885-id-124878.html 1. sizeof应用在结构上的情况 请看下面的结构: struct MyStruct { ...
- [你必须知道的.NET]第十九回：对象创建始末（下）
本文将介绍以下内容: 对象的创建过程 内存分配分析 内存布局研究 接上回[第十八回:对象创建始末(上)],继续对对象创建话题的讨论>>> 2.2 托管堆的内存分配机制 引用类型的实例 ...
- 什么是APS高级计划排程（生产计划排产）系统主要功能模块有哪些？
什么是APS高级计划排程(生产计划排产)系统? APS高级计划排程(高级计划排产)系统主要解决“在有限产能条件下,交期产能精确预测.工序生产与物料供应最优详细计划”的问题.APS高级计划排程(高级计划 ...
- lr_save_searched_string函数的使用介绍
函数功能:在某一个字符缓冲区中搜索指定的字符串,并将搜到的字符串保存在参数中. 应用场合:可配合LoadRunner的关联功能,灵活获取服务器端返回的数据 举例:客服3.0工作流系统,工单处理每次都从 ...
- 【ASP.NET MVC】Scripts目录
很多时候我们经常在用的东西我们可能不一定真正的了解,因为我们可能已经会用了,便不再对其进行探索,下面我们看一下在ASP.NET MVC3项目下的Scripts目录下的文件: Jquery核心库我们就不 ...
- 2017-2018-1 20179202《Linux内核原理与分析》第五周作业
一.系统调用实验: 1.知识准备: (1)系统调用的三层皮:xyz()(API).system_call(所有系统调用的入口) . sys_xyz()(中断服务程序) (2)API是程序员在用户空间下 ...
- 【JAVAWEB学习笔记】网上商城实战4：订单模块
今日任务 完成订单模块的功能 1.1 订单 模块的功能 1.1.1 我的订单: [我的订单的查询] * 在header.jsp中点击我的订单. * 提交到Servlet: * 获得用户 ...
- New Year Tree 【DFS序+线段树区间查询修改+二进制保存状态】
题目链接[http://codeforces.com/problemset/problem/620/E] 题意:给出n个数,每个数有一个初始的颜色.由这n个数组成一颗树.有两种操作1.将以节点u为根的 ...