ExtJS 消息框小结

 一、话说消息框

       大家对消息框并不陌生哈，消息框通常是一个模式窗口，会屏蔽掉当前窗口所有的鼠标键盘事件，关闭后才能继续后面的操作。消息框的类型也不一而足，有显示信息的，有提示输入的，有确定用户行为的，IE和Firefox默认的消息框很难看啊，死气沉沉，古板枯燥，看多了令人生厌。

       不过，好消息是Ext为我们带来了全新风格的消息框，那个舒服啊，啧啧啧……

       Extjs在实现消息框的时候，完全摈弃了传统的风格，不再弹出新的对话框，而是在当前页面跳出一个层，并将原页面完整覆盖。

       原来，只是一种模拟。

       在Ext中，定义了一个类MessageBox，该类还有一个更精简的名字Msg，所有消息框都定义在该类中。

      

二、最简单的消息框——提示框

       最简单的？Extjs有最简单的东西吗？没有。如果深入了解，发现每个细节都不简单，但是，幸好大部分时候我们只是用用，解决项目中的实际问题，到底Jack如何做到的，让喜欢玩的人玩去吧。

       提示框的语法：

       Ext.MessageBox. alert ( String title, String msg, Function fn, Object scope );

       参数定义如下：

1、 title：标题

2、 msg：提示内容

3、 fn：提示框关闭后自动调用的回调函数

4、 scope：作用域，用于指定this指向哪里，一般不用管他，特殊情况下有用

其实，通常情况下，我们用得更多的是title和msg两个参数，举例如下①：

extjsAlert = function(){

     Ext.MessageBox.alert("提示框", "这是一个提示框");

}

       也可以这样：

extjsAlert = function(){

     Ext.MessageBox.alert("提示框", "这是一个提示框", function(){

            alert("提示框关闭了");

     });

}

       页面代码是这样的：<input type="button" value="alert" onclick="extjsAlert();">，记住函数名不要使用和DOM模型相同的名字，他们犯冲。

三、输入框

       输入框用来提示输入字符串，相当于window.prompt()方法。

       语法：

       Ext.MessageBox.prompt(String title,String msg, Function fn, Object scope, Boolean/Number multiline )

       从定义中可以看到，前四个参数和提示框一样，最后多了一个参数，如果为true或为数字，将允许输入多行或者指定默认高度（像素）。

       示例如下②：

extjsPrompt = function(){

     Ext.MessageBox.prompt("输入框", "请输入您的姓名：", function(btn, txt){

            Ext.MessageBox.alert("结果", "您点击了" + btn + "按钮，<br>输入的内容为" + txt);

     });

}

       如果显示多行，看下面示例③：

extjsPrompt = function(){

     Ext.MessageBox.prompt("输入框", "请输入您的姓名：", function(btn, txt){

            Ext.MessageBox.alert("结果", "您点击了" + btn + "按钮，<br>输入的内容为" + txt);

     }, this, 300);

}

       注意回调函数的参数，第一个为点击的按钮的名字，如果点击确定，为“ok”，如果点击取消，为“cancel”，第二个参数就是用户输入的文本。

 

四、确认框

       确认框提示用户作出选择，语法如下：

       Ext.MessageBox.confirm ( String title, String msg, Function fn, Object scope )

       参数同上，示例如下：

 

extjsComfirm = function(){

     Ext.MessageBox.confirm("确认", "请点击下面的按钮作出选择", function(btn){

            Ext.MessageBox.alert("您单击的按钮是：" + btn);

     });

}

 

       我们可以通过回调函数的参数btn采取相应的行动。

五、自定义消息框

       如果上面所有的消息框都无法满足我们的需求，譬如没有图标、按钮类型太少，甚至更BT的，如果想要个进度条怎么办？哈哈，别急，Extjs息数为你想到了。我们可以使用show()方法自定义消息框，只需要稍微配置一下就可以了。

       show()方法的语法如下：

       Ext.MessageBox.show ( Object config )

       语法是不是显得更简单？不要小瞧了他，config这个参数可谓包罗万象，使用json格式可以传输很多信息到方法中去。

       config中常见属性如下：

              title：消息框标题栏

              msg：消息内容

              width：消息框的宽度

              multiline：是否显示多行文本    

              closable：是否显示关闭按钮

              buttons：按钮

              icon：图标

              fn：回调函数

       举例说明：

 

extjsCustom = function(){

     var config = {

            title: "自定义对话框",

            msg: "这是一个自定义对话框，想怎么搞就怎么搞",

            width: 400,

            multiline: true,

            closable: false,

            buttons: Ext.MessageBox.YESNOCANCEL,

            icon: Ext.MessageBox.QUESTION,

            fn: function(btn, txt){

                   Ext.MessageBox.alert("结果", "您点击了‘yes’按钮<br>，输入的值是：" + txt);

            }

     };

     Ext.MessageBox.show(config);

}

 

       在上面的例子中，不熟悉的有buttons和icon，这些选项在Ext.MessageBox中已有定义。

       buttons（按钮）的取值如下：

              OK：只有“确定”按钮

              CANCEL：只有“取消”按钮

              OKCANCEL：有“确定”和“取消”按钮

              YESNO：有“是”和“否”按钮

              YESNOCANCEL：有“是”、“否”和“取消”按钮

       icons（图标）取值如下：

              INFO：信息图标

              WARNING：警告图标

              QUESTION：询问图标

              ERROR：错误图标

六、进度条对话框

       进度条对话框可以说是一个创举，让一个富了现实意义和使用价值的进度条轻松实现，随着进度条的滚动，我们的心情也随之畅快起来。代码赋予我们无穷的活力，让人们的视觉再次受到最强烈的冲击。

       进度条对话框也是一个自定义消息框，配置config时添时progress=true即可，同时还可以设置其他相关信息，如进度提示等。Extjs为我们提供的只是一个对话框而已，进度条的滚动还得通过代码实现。下面是进度条的代码示范：

 

extjsProgress = function(){

     Ext.MessageBox.show({

           title: '请等待',

           msg: '正在加载项目...',

           progressText: '正在初始化...',

           width:300,

           progress:true, //此属性证明这是一个进度条

           closable:false

       });

       var f = function(v){

            return function(){

                if(v == 12){

                   Ext.MessageBox.hide();

                    Ext.MessageBox.alert('完成', '所有项目加载完成!');

                }else{

                    var i = v/11;

                    Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% 已完成');

               }

           };

       };

      

       for(var i = 1; i < 13; i++){

           setTimeout(f(i), i*500);

       }

}

 

       在上面的代码中，progressText属性是进度条滚动之前最初的文本，滚动进程由updateProgress(Number value, String progressText)方法来定义，参数value是从0~1之间的小数，表示进度百分比；progressText则表示进度条滚动过程中的文本提示信息，如Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% 已完成');。

七、让消息框飞出来

       很显然，这是一个动画效果。Extjs允许我们将消息框从指定的位置飞出来，关闭时又飞回去，很炫吧！实现也相当轻松，只要设置animEl选项即可，该选项指定一个标签，即消息框从标签处飞出，关闭后又飞回标签。下面是演示代码：

 

extjsAnimal = function(){

     var config = {

            title: "飞出的消息框",

            msg: "这是一个自定义对话框，是飞出来的哦。",

            width: 400,

            multiline: true,

            closable: false,

            buttons: Ext.MessageBox.YESNOCANCEL,

            icon: Ext.MessageBox.QUESTION,

            animEl: "fly"

     };

     Ext.MessageBox.show(config);

}

 

       animEl的值为“fly”，这是按钮的id值，在html页面中这样定义：<input type="button" value="Animal" id="fly" onclick="extjsAnimal();"><br>。

八、小结

       本节是Extjs最简单的内容，和浏览器传统的效果相比，效果更加炫丽动感。一个小小的消息框，Extjs如此注重细节，实在难能可贵。我们有理由相信，富客户端的蓝天，即将徐徐展开。

       以下是本章使用的html页面内容：

 

<input type="button" value="Alert" onclick="extjsAlert();"><br>

<input type="button" value="Prompt" onclick="extjsPrompt();"><br>

<input type="button" value="Comfirm" onclick="extjsComfirm();"><br>

<input type="button" value="Custom" onclick="extjsCustom();"><br>

<input type="button" value="Progress" onclick="extjsProgress();"><br>

<input type="button" value="Animal" id="fly" onclick="extjsAnimal();"><br>