ExtJS学习之路第四步：看源码，实战MessageBox
可以通过看MessageBox.js的源码来深入认识，记住它的主要用法。Ext.MessageBox是实用类，用于生成不同风格的消息框,它是Singleton(单例)，别名Ext.Msg。注意MessageBox是异步的，不同于一般的Javascript'alert'(它将停止浏览器的执行)，显示一个MessageBox不会导致代码停止。出于这个原因，如果你有代码应该只运行在MessageBox用户反馈之后，你就应该加一个回调函数。
Ext.MessageBox.alert()
样式：警告框只有一个OK button
定义：alert: function(cfg, msg, fn, scope) {}
@param {String}title -标题栏的文字[查看定义发现，如果cfg是string类型的话，就是title，否则处理为config配置]
@param {String} msg -消息框主题文字
@param {Function} [fn] -在消息框被关闭之后触发回调函数,可以是点击按钮关闭也可以点击X关闭。
@param {Object} [scope=window] scope (this的引用) 回调函数运行的环境
<button id="btAlert" type="button">Alert</button> <p id="pCon">Before Click!</p>
Ext.onReady(function(){ Ext.get("btAlert").on('click',function(){ Ext.Msg.alert('Name', 'Yixiaoheng',function(){ Ext.get("pCon").setHTML("After click!"); }); }); });
警告框
Ext.MessageBox.confirm()
样式：确认消息框，有两个按钮Yes 和No
定义：confirm: function(cfg, msg, fn, scope) {}
参数含义同上
Ext.onReady(function(){ var pCon=""; Ext.get("btMsg").on("click", function () { var pCon="没有点击按钮，关闭了提示框"; Ext.get("btConfirm").on("click", function () { Ext.MessageBox.confirm("提示", "是否要跳转页面？", function (btnId) { pCon="点击了"+btnId+"按钮！"; //yes\no\cancel Ext.fly("pCon").setHTML(); }); }); }); });
Ext.MessageBox.prompt()
样式：显示一个带有OK、Cancel按钮的消息框，提示用户输入些文字。这个提示可以是单行或者是多行的textbox。
定义：prompt : function(cfg, msg, fn, scope, multiline, value){}
@param {Boolean/Number} [multiline=false] True是创建多行textbox，用默认的文本高度defaultTextHeight
@param {String} [value=''] 默认文本输入框的值
Ext.onReady(function(){ Ext.get("btMsg").on("click", function () { Ext.MessageBox.prompt( "2014计划", "请简略概述", function (btn, text) { Ext.fly("pCon").setHTML("点击了" + btn + "按钮,输入内容：" + text); }, this, true, //multiline "亲，说点想法吧"); }); });
PS：foucus到文本框上去的时候，原值不会自动消失。
Ext.MessageBox.progress()
显示：带进度条的消息框
定义： progress : function(cfg, msg, progressText){}
@param {String} [progressText=''] 显示在进度条里面的文字。
需要自己负责更新进度条updateProgress,并且当进度条完毕的时候关闭消息框
Ext.get("btMsg").on("click", function () {
Ext.MessageBox.progress("进度", "正在处理，请稍候...", "0%");
});
但是这个是静态的哦，是不会动的啦！
Ext.MessageBox.updateProgress()
更新进度样式上的文字和进度。
updateProgress : function(value, progressText, msg){
this.progressBar.updateProgress(value, progressText);
if (msg){
this.updateText(msg);
}
return this;
},
@param {Number} [value=0] 0-1之间，比如0.6
@param {String} [progressText=''] 在进度条内部显示的文字
@param {String} [msg] 消息框主题的文字，默认没有定义
Ext.get("btMsg").on("click", function () {
Ext.MessageBox.progress("进度", "正在处理，请稍候...", "0%");
updateProgress(0);
});
function updateProgress (progress) {
if (progress >= 1) {//进度条到头了
Ext.MessageBox.updateProgress(1, "处理完成！","处理完成");
Ext.defer(function () { Ext.MessageBox.close(); }, 200);//类似setTimeout延迟200毫秒关闭消息框
return;
}
Ext.MessageBox.updateProgress(progress,"已完成"+Math.round(progress * 100) + "%");
Ext.defer(function () {
updateProgress(progress + 0.1);
}, 500);//递归
}
Ext.MessageBox.wait()
说明：显示无限自动更新进度条的消息框。这可以被用来阻止用户交互，而等待一个长期运行的进程来完成一个没有定义的时间间隔。当过程完成时，自己负责关闭消息框。
定义：
wait : function(cfg, title, config){
if (Ext.isString(cfg)) {
cfg = {
title : title,
msg : cfg,
closable: false,
wait: true,
modal: true,
minWidth: this.minProgressWidth,
waitConfig: config//
};
}
return this.show(cfg);
},
title-标题 cfg-主题内容 config-这个值被付给waitConfig最后，实质调用的是progressBar的wait()方法，参数具体可以查http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.ProgressBar
Ext.get("btMsg").on("click", function () {
Ext.MessageBox.wait("详细信息内容", "标题", {
interval: 100,//进度条加载速度
duration: 10000,//持续时间
fn:function(){
this.updateText('加载完毕');
}
});
Ext.defer(function () {
Ext.MessageBox.hide();
}, 15000);
});
加载完毕之后中间进度条显示'加载完毕'。
一种是progress进度条，一种是wait如何取舍？
进度条对话框中显示的进度是需要我们控制的，也就是说，如果你知道一件事情的处理进度，并能够及时的更新进度条，那么建议使用进度条对话框。
如果说你要处理一个事情，但是不知道处理时间，这是我们就会用到等待对话框了，等待对话框中的进度条会一直循环，直到我们处理完成后将它关闭掉
其实，来自Ext.ProgressBar类，查看http://docs.sencha.com/extjs/4.2.1/source/ProgressBar.html#Ext-ProgressBar你就能在开头明白，ProgressBar有两类，一种是人工一种自动。在MessageBox中不过是继承自此罢了。
最后但很重要
你注意到没参数中的cfg?所有这些都可以用show()实现，来个综合的例子
Ext.get("btMsg").on("click", function () {
Ext.MessageBox.show({
title: "标题",
msg: "详细信息内容",
buttons: Ext.MessageBox.YESNOCANCEL, //对话框的按钮组合
multiline: false, //有文本框时，是否为多行文本框
closable: false, //是否可关闭
prompt: true,
icon: Ext.MessageBox.WARNING,
iconCls: "add16",
width: 400,
proxyDrag: true,
value: "初始文本",
progress: true,
progressText: "加载中..",
animateTarget: "bt3"
});
updateProgress(0);//前面定义过此函数
});
ok，到此MessageBox告一段落！~
这样学起来，是否没有那么复杂咩？如果源码并不是很长的话，对理解方法如何使用是非常有用的。突然解了最开始ExtJS有些方法没有具体写出应用，自己该如何调用的问题。
参考文献：
主要还是API 有MessageBox、ProgressBar
ExtJS 教程目录-这个是总结的比较全的，可以参考去看看哦
