Extjs,最好的javascript,js,ajax,Web前端开发框架，一看都会被它华丽的外表所吸引。

Ext.MessageBox.alert('标题', '内容', function(btn) {
    alert('你刚刚点击了 ' + btn);
});

现在可以通过第一个参数修改窗口的标题，第二个参数决定窗口的的内容，第三个参数是你关闭按钮之后（无论是点ok按钮还是右上角那个负责关闭的小叉叉），就会执行的函数，嘿嘿，传说中的回调函数。

Ext.MessageBox.confirm('选择框', '你到底是选择yes还是no？', function(btn) {
    alert('你刚刚点击了 ' + btn);
});

选择yes或者是no，然后回调函数里可以知道你到底是选择了哪个东东。

Ext.MessageBox.prompt('输入框', '随便输入一些东西', function(btn, text) {
    alert('你刚刚点击了 ' + btn + '，刚刚输入了 ' + text);
});

随便输入几个字，然后点按钮，它会告诉你输入了些什么东西

Ext.MessageBox.show({
    title: '多行输入框',
    msg: '你可以输入好几行',
    width:300,
    buttons: Ext.MessageBox.OKCANCEL,
    multiline: true,
    fn: function(btn, text) {
        alert('你刚刚点击了 ' + btn + '，刚刚输入了 ' + text);
    }
});

其实只需要show，我们就可以构造各种各样的窗口了，title代表标题，msg代表输出的内容，buttons是显示按钮，multiline告诉我们可以输入好几行，最后用fn这个回调函数接受我们想要得到的结果。

可能让我们对show这个方法的理解更深

Ext.MessageBox.show({
    title:'随便按个按钮',
    msg: '从三个按钮里随便选择一个',
    buttons: Ext.MessageBox.YESNOCANCEL,
    fn: function(btn) {
        alert('你刚刚点击了 ' + btn);
    }
});

我相信buttons这个参数是一个数组，里边的这个参数绝对了应该显示哪些按钮，Ext.MessageBox给我们提供了一些预先定义好的组合，比如YESNOCANCEL,OKCANCEL，可以直接使用。

实际上只需要将progress这个属性设置为true，对话框里就会显示个条条。

Ext.MessageBox.show({
    title: '请等待',
    msg: '读取数据中',
    width:240,
    progress:true,
    closable:false
});

看到进度条了吧，不过它可不会自动滚啊滚的，你需要调用Ext.MessageBox.updateProgress让进度条发生变化。

另外多说一句，closable: false会隐藏对话框右上角的小叉叉，这样咱们就不能随便关掉它了。

现在让咱们加上更新进度条的函数，使用timeout定时更新，这样咱们就可以看到效果了。呵呵~效果真不错，这样咱们以后就可以使用进度条了。

var f = function(v){
    return function(){
        if(v == 11){
            Ext.MessageBox.hide();
        }else{
            Ext.MessageBox.updateProgress(v/10, '正在读取第 ' + v + ' 个，一共10个。');
        }
   };
};
for(var i = 1; i < 12; i++){
   setTimeout(f(i), i*1000);
}

超炫效果，让对话框好像是从一个按钮跳出来的，关闭的时候还会自己缩回去。你可以看到它从小变大，又从大变小，最后不见了。实际上的配置缺非常简单，加一个animEl吧。让我们看看上边那个三个按钮的例子会变成什么样子。

Ext.MessageBox.show({
    title:'随便按个按钮',
    msg: '从三个按钮里随便选择一个',
    buttons: Ext.MessageBox.YESNOCANCEL,
    fn: function(btn) {
        alert('你刚刚点击了 ' + btn);
    },
    animEl: 'dialog'
});

animEl的值是一个字符串，它对应着html里一个元素的id，比如<div id="dialog"></div>。指定好了这个，咱们的对话框才知道根据哪个元素播放展开和关闭的动画呀。

只需要这样，咱们就得到动画效果，嘿嘿，截不到动画效果的图，大家自己去看吧。