ExtJS 基础解析之【Ext.MessageBox】
小弟最近在研究extjs!在研究过程中也做了一些笔记!在网上也搜集了不少的资料,感觉挺不错的!于是想和大家分享一下!由于小弟是个新人,可能有些地方做的还不够!希望各位多多指点,多多批评。
好的!下面进入正题!首先,先让大家简单的了解一下ExtJS。
extjs来源于YUI,也就是Yahoo User Interface的简称,它是一个用JavaScript编写的工具和控件库。extjs主要用来开发RIA(Rich Internet Application)应用,既富客户端应用。在实现RIA的技术方面,现在也形成了两个分支,一种是以Flex和Silverlight为代表的运行于浏览器插件中的RIA应用,另一种是以ExtJS,Bindows等为代表的利用HTML,CSS和JavaScript等实现的富客户端组件技术的RIA。ExtJS的组件极有可能成为开发RIA应用事实上的UI标准,但是要成为标准必须满足两个条件:第一,使用范围非常广泛。在这一点上,ExtJS的表现还不是那么好,这也是它没有成为WebUI标准的重要原因。第二,实现非常完美、功能强大,在这一点上ExtJS基本上已经做到了。当然了!不要忘了这句话“没有最好只有更好”。希望ExtJS的爱好者们多多的去学习它、了解它,最终让它在更多的项目中发挥作用。
好啦!下面我和大家一起来解析一下Ext.MessageBox
1.Ext.MessageBox.alert()方法
一共有四个参数,下面主要简单的介绍一下三个吧,
alert(title,msg,function(){})其中title和msg为必选参数,function可选可不选 在关闭窗口后触发。
例子:Ext.MessageBox.alert("title","msg");
例子:Ext.MessageBox.alert("title","msg",function(){alert(e)});
这里的e参数,是你单击的弹出框的按钮的值有两个:ok,cancel
2.Ext.MessageBox.confirm()方法
confrim()和alert()题本上是一样的。
例子:Ext.MessageBox.confirm("title","msg",function(e){alert(e);});
其中参数e也是你单击的弹出框的按钮的值,和alert相同,不过这个包括三个:yes,no,cancel
3.Ext.MessageBox.prompt()方法
这个的参数相对于前面两个来说多一些,这个比alert方法多一个返回值和是否多行。
例子:Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text);},this,true);
//如果输入"war3",点击OK按钮,则弹出OK-war3
例子:Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text);},this,true);
//this是作用域 true是多行。
4.Ext.MessageBox.show()方法
它的功能很强大,比前面的方法使用起来更加方便,是采用config配置形式,参数比较多。
(1).animE1:对话框弹出和关闭时的动画效果,比如设置为“qingpingguo”,则从qingpingguo
,生动画,收缩则相反。
(2).buttons:弹出框按钮的设置:Ext.Msg.OK
Ext.Msg.OKCANCEL
Ext.Msg.CAMCEL
Ext.Msg.YESNO
Ext.Msg.YESNOCANCEL
这个上面的文字可以自定义,若为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
总体的举个例子吧:
Ext.MessageBox.show({
title:"标题",
msg:"内容的消息",
button:{"ok":"青苹果不在显示OK了"},
fn:function(e){alert(e);},
animEl:"test1",
width:300,
icon:Ext.MessageBox.INFO,
closable:false,
progress:true,
wait:true,
progressText:"进度条"
// prompt:true
// multiline:true
});
5.Ext.MessageBox.show()中的进度条的使用
首先必须知道例外两个方法 Ext.MessageBox.hide()和Ext.MessageBox.updateProgress(value,"ProgressText","msg")(三个参数,看名字就知道啥意思了),
第一种:(通过进度的大小控制进度,满进度为10)
Ext.onReady(function(){
Ext.get('btn1').on('click', function(){
Ext.MessageBox.show({
title: '青苹果',
msg: '青苹果...',
width:300,
progress:true,
closable:false,
});
var f = function(v){
return function(){
if(v == 11){
Ext.MessageBox.hide();
//alert("加载完成!");
}else{
Ext.MessageBox.updateProgress(v/10, '内容加载中,进度 ' + v + ' / 10...');
}
};
};
for(var i = 1; i < 12; i++){
setTimeout(f(i), i*1000);//从点击开始计时,每一秒执行一次
}
})
});
第二种:(通过固定时间控制进度加载)
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);
}
);
效果一样。
OK! Ext.MessageBox就和大家分享到这里。虽然本文比较简单!但小弟写的还算是细腻吧!呵呵!好啦!下次再和大家分享别的关于ExtJS的东东。
|
作者:青苹果 座右铭:不断的反省自己!然后加以改变! 感兴趣的技术:.NET、数据库、JavaScript、C#、ajax、winform、jquery、extjs 本文出处:http://www.cnblogs.com/xinchun/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |