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/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |
