1.Ext.MessageBox.alert()方法
有四个参数,为简单起见,主要介绍前面三个参数:
alert( title , msg , function(){} )
其中title,msg为必选参数,function为可选参数,在关闭弹出窗口后触发。
Ext.MessageBox.alert("title","msg");
Ext.MessageBox.alert("title","msg",function(){alert("关闭对话框后弹出!")});
2.Ext.MessageBox.confirm()方法
基本上同alert()方法一模一样。
注意这点:
Ext.MessageBox.confirm("title","msg",function(e){alert(e);});
这个参数e是什么?它是你点击的弹出框的按钮的值,三种值:yes,no,cancel.Alert()方法也是如此,不过只有两种值:ok,cancel.
3.Ext.MessageBox.prompt()方法
有六个参数,比前面alert方法多一个返回值和是否多行。
Ext.MessageBox.prompt("title","msg");
Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text);});
//输入"qianxudetianxia",点击ok按钮,弹出ok-qianxudetianxia
Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text);},this,true);
//true为多行,this表示作用域
4.Ext.MessageBox.show()方法
功能很强大,采用config配置形式,比前面的方法使用更方便。
参数很多,在此列举最常用的配置参数:
1.animEl:对话框弹出和关闭时的动画效果,比如设置为“id1”,则从id1处弹出并产生动画,收缩则相反
2.buttons:弹出框按钮的设置,主要有以下几种:Ext.Msg.OK,
Ext.Msg.OKCANCEL,
Ext.Msg.CAMCEL,
Ext.Msg.YESNO,
Ext.Msg.YESNOCANCEL
你也可以自定义按钮上面的字:{"ok":"我本来是ok的"}。
若设为false,则不显示任何按钮.
3.closable:如果为false,则不显示右上角的小叉叉,默认为true。
4.msg:"消息的内容"
5.title:"标题"
6.fn:关闭弹出框后执行的函数
7.icon:弹出框内容前面的图标,取值为Ext.MessageBox.INFO,
Ext.MessageBox.ERROR,
Ext.MessageBox.WARNING,
Ext.MessageBox.QUESTION
8.width:弹出框的宽度,不带单位
9.prompt:设为true,则弹出框带有输入框
10.multiline:设为true,则弹出框带有多行输入框
11.progress:设为true,显示进度条,(但是是死的)
12.progressText:显示在进度条上的字
13.wait:设为true,动态显示progress
14.waitConfig:配置参数,以控制显示progress
example:
Ext.MessageBox.show({
title:"标题",
msg:"内容的消息",
buttons:{"ok":"我替换OK了","cancel":"取消"},
fn:function(e){alert(e);},
animEl:"test1",
width:500,
icon:Ext.MessageBox.INFO,
closable:false,
progress:true,
wait:true,
progressText:"进度条"
// prompt:true
// multiline:true
});
4.Ext.MessageBox.show()中的进度条的使用
首先必须知道例外两个方法 Ext.MessageBox.hide()和Ext.MessageBox.updateProgress(value,"ProgressText","msg")(三个参数,看名字就知道意思),
注意value为0-1之间的数,表示进度条的进度.
第一种:(通过进度的大小控制进度,满进度为1)
Ext.get("btn1").on(
"click",
function(){
Ext.MessageBox.show({
title:"df",
msg:"dfd",
progress:true,
width:300,
closable:true
});
var f=function(v){
return function(){
if(v==12)
{
Ext.MessageBox.hide();
//alert("加载完成!");
}
else
{
var i=v/11;
Ext.MessageBox.updateProgress(i,Math.round(100*i)+"% completed",i);
}
}
}
for(var i=1;i<13;i++)
{
setTimeout(f(i),i*500);//从点击时就开始计时,所以500*i表示每500ms就执行一次
}
}
);
第二种:(通过固定时间控制进度加载)
Ext.get("btn1").on(
"click",
function(){
Ext.MessageBox.show({
title:"时间进度条",
msg:"5s后关闭进度框",
progress:true,
width:300,
wait:true,
waitConfig:{interval:600},//0.6s进度条自动加载一定长度
closable:true
});
setTimeout(function(){Ext.MessageBox.hide()},5000);//5后执行关闭窗口函数
}
最后关于那个waitConfig的参数,在此说明下:
1.interval:进度的频率
2.duration:执行进度的持续时间,超过这个时间后,interval失效,不再产生进度效果,但进度狂也不会消失。
3.fn:duration的时间到后执行的函数
所以,上面的通过时间控制进度另外一种写法为:
Ext.get("btn1").on(
"click",
function(){
Ext.MessageBox.show({
title:"时间进度条",
msg:"5s后关闭进度框",
progress:true,
width:300,
wait:true,
waitConfig:{
interval:600,
duration:5000,
fn:function(){
Ext.MessageBox.hide();//让进度条消失
}},
closable:true
});
//setTimeout(function(){Ext.MessageBox.hide()},5000);
}
);
效果一样
分享到:
相关推荐
1. ExtJs2.0学习系列(1)--Ext.MessageBox 2. ExtJs2.0学习系列(2)--Ext.Panel 3. ExtJs2.0学习系列(3)--Ext.Window 4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 ...
代码如下: Ext.onReady(function() { Ext.Msg.alert(‘提示’, ‘逗号分隔参数列表’); //这种方式非常常见的 ...接下来认识一下Ext.MessageBox Ext.MessageBox是一个工具类,他继承自Obiect对象,用来生成各种
Ext.MessageBox.confirm()详解 显示一个确认对话框,用来代替JavaScript标准的confirm()方法,具有两个按钮“是”和“否”如果为其提供一个回调函数,则该函数将在单击按钮后被调用(包括右上角的...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
ExtJs2.0学习系列(1)--Ext.MessageBox
1.3 是否真的需要学习ExtJS 1.4 ExtJS4.0新特性 1.5 ExtJSUI组件基础 1.6 了解一下类似技术 1.7 本章小结 第2章 开始ExtJS之旅 2.1 认识ExtJS的开发包 2.2 也从Helloworld开始 2.3 ExtJS中的基本概念 2.4 ...
第六章 Ext.MessageBox 消息对话框 46 一、警告对话框和确认对话框 46 二、输入对话框 47 三、自定义DIY对话框 48 四、加载进度条对话框 49 五、等待进度条对话框 50 六、基本的等待对话框 51 第七章 Ext.tip....
论坛上找的ExtJs消息提示框,各个方向的都有,十分人性化
一、基础篇 1、Ext JS下载及配置 2、基本功能 2.1、Ext.MessageBox消息框 2.2、Ext.window.MessageBox 3、工具栏和菜单栏 3.1、Ext.toolbar.Toolbar工具栏 3.2、Ext.menu.Menu菜单栏 4、表单
基于extjs的.NET3.5控件Coolite 1.0.0.34580 (Preview预览版), *************************************************** * Version 1.0.0 升级日志 * *************************************************** 1. ...
修改过的Ext.MessageBox.prompt方法,可直接调用,对输入的文字加密,适合做密码验证框
学习体会,编出更令中国人适应的提示框 Ext.MessageBox.show({ title:"这是标题", msg:"这是提示内容,很精彩!!", width:500, icon:Ext.MessageBox.WARNING, //wait:true, prompt:true, buttons:{ "ok":...
1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用json / 8 1.2.6 在java中使用...
一、 fp.form.submit 有waitMsg 属性来设置等待效果,如下。但是对于Ext.Ajax.request来说 waitMsg 并不起作用。 fp.form.submit({ url : '', waitTitle : [性别]修改, ... Ext.MessageBox.aler
1.ExtJS自定义组件,图片按钮为例. 2.此图片按钮背景完全为图片,没有边框,需要使用者提供2张图片,一张初始化用,一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...
Ext.MessageBox.alert("信息提示", "保存成功!"); syswin.close(); //关闭窗口 } else { // msg('信息提示', '添加时出现异常!'); } }, failure : function() { msg('信息提示', '添加失败!'); } }); } ...
5.2.2. Ext.MessageBox.confirm() 5.2.3. Ext.MessageBox.prompt() 5.3. 如果你想的话,可以控制得更多 5.3.1. 可以输入多行的输入框 5.3.2. 再看一个例子呗 5.3.3. 下一个例子是进度条 5.3.4. 动画效果,跳...