ExtJs消息框

1.ExtJs之消息框：
  语法：Ext.MessageBox.alert(String title, String msg,Function fn, Obejct scope);   参数定义： 
  

• title: 标题

• msg: 提示内容

• fn: 提示框关闭之后自动调用的回调函数

• scope: 作用域，用于指定this指向哪里

[javascript] view plaincopy

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

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

     alert("提示框关闭")    

});  

2. ExtJs 之输入框 
  语法：Ext.MessageBox.prompt(String title, String msg,Function fn,Object scope,Boolean/Number multiline,String defaulttext); 
  参数定义：

title: 标题

msg: 提示内容

fn: 提示框关闭之后自动调用的回调函数

scope: 作用域，用于指定this指向哪里

Boolean/Number:如果为true或为数字，则表示允许输入多行或者指定默认高度

defaulttext ：输入框默认文本内容

[javascript] view plaincopy

Ext.MessageBox.prompt("输入框","请输入名字：",function(bu,txt){    

     Ext.MessageBox.alert("Result","你点击的是"+bu+"按钮,<br> 输入的内容为："+txt);    

},this,300); 

3.ExtJs之确认框 
语法： 
  Ext.MessageBox.confirm(String title, String msg,Function fn, Object scope); 
  参数定义： 
  

title: 标题

msg: 提示内容

fn: 提示框关闭之后自动调用的回调函数

scope: 作用域，用于指定this指向哪里

[javascript] view plaincopy

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

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

}); 

4. ExtJs之自定义消息框 
  语法： 
    Ext.MessageBox.show(Object config);  config属性说明： 

title : 消息框标题栏

msg:消息内容

width:消息框的宽度

multiline: 是否显示多行文本

closable:是否显示关闭按钮

buttons:按钮

icon:图标

fn:回调函数

[javascript] view plaincopy

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("Result","你点击了'yes'按钮<br>,输入的值是："+txt);    

    

 };    

Ext.MessageBox.show(config); 

注意： 在ExtJs.MessageBox中已经定义了buttons的取值.如下 

引用

OK：只有"确定"按钮 
CANCEL:只有"取消"按钮 
OKCANCEL:有"确定"和"取消"按钮 
YESNO: 有"是"和"否"按钮 
YESNOCANCEL：有"是"、"否"和"取消"按钮 

icons取值如下 

引用

  INFO:信息图标 
  WARNING:警告图标 
  QUESTION:询问图标 
  ERROR:错误图标


5.ExtJs之进度条对话框     进度条对话框也是自定义消息框的一种，只是在配置Config时添progress=true即可,同时在设置其他相关信息，比如进度提示。 

[javascript] view plaincopy

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=0; i<13;i++){    

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

  } 

解 析上述代码中ProgressText属性是进度条滚动之前最初的文本，滚动进程由updateProgress(Number value,String progressText)方法来定义,参数value是从0-1之间的小数，表示进度百分比;progressText则表示进度条滚动过程中的文本提 示信息。

6.ExtJs之消息框动画效果 

[javascript] view plaincopy

var config = {    

       title:"飞出的消息框",    

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

       width:400,    

       multiline:true,    

       closable:false,    

       buttons:Ext.MessageBox.YESNOCANCEL,    

       icon:Ext.MessageBox.QUESTION,    

       animEl:"fly"    

     };    

     Ext.MessageBox.show(config); 

PS：弹框的宽度都是固定的，很多时候都会影响美观，相信很多人都会想着如何改变弹框的宽度。

Ext源码
1、progress : function(title, msg, progressText){
            this.show({
                title : title,
                msg : msg,
                buttons: false,
                progress:true,
                closable:false,
                minWidth: this.minProgressWidth,
                progressText: progressText
            });
            return this;
        },
   wait : function(msg, title, config){
            this.show({
                title : title,
                msg : msg,
                buttons: false,
                closable:false,
                wait:true,
                modal:true,
                minWidth: this.minProgressWidth,
                waitConfig: config
            });
            return this;
        },
修改宽度的代码为：Ext.MessageBox.minProgressWidth = 400;
例：
        Ext.MessageBox.minPromptWidth = 400;
        Ext.MessageBox.prompt("补充需求信息", "需求分析", analysisreq, this, 250, vanalysisReq);