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

Ext.MessageBox 消息对话框

自定义对话框Ext.MessageBox.show

ExtJS 教程目录-这个是总结的比较全的，可以参考去看看哦