extjs各种弹出框

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

• title: 标题
• msg: 提示内容
• fn: 提示框关闭之后自动调用的回调函数
• scope: 作用域，用于指定this指向哪里

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

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

• title: 标题
• msg: 提示内容
• fn: 提示框关闭之后自动调用的回调函数
• scope: 作用域，用于指定this指向哪里
• Boolean/Number:如果为true或为数字，则表示允许输入多行或者指定默认高度

Ext.MessageBox.prompt("输入框","请输入名字：",function(bu,txt){  
     Ext.MessageBox.alert("Result","你点击的是"+bu+"按钮,<br> 输入的内容为："+txt);  
}); 
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指向哪里

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:回调函数

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即可,同时在设置其他相关信息，比如进度提示。 

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之消息框动画效果 

var config = {  
       title:"飞出的消息框",  
       msg:"这是一个自定义对话框，是飞出来的哦",  
       width:400,  
       multiline:true,  
       closable:false,  
       buttons:Ext.MessageBox.YESNOCANCEL,  
       icon:Ext.MessageBox.QUESTION,  
       animEl:"fly"  
     };  
     Ext.MessageBox.show(config);