ExtJs学习之弹出框，提示框，输入框等框

[size=large][b]1.ExtJs之消息框：[/b][/size]
[color=blue][b] 语法：Ext.MessageBox.alert(String title, String msg,Function fn, Obejct scope);[/b][/color] 参数定义：
[color=red][b] [list]
[*] title: 标题
[*] msg: 提示内容
[*] fn: 提示框关闭之后自动调用的回调函数
[*] scope: 作用域，用于指定this指向哪里
[/list][/b][/color]
例如：

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

如果要将上面的代码运行，则要将改源码保存JS，然后导入页面中，增加

  <input type="button" value="点击" onclick="ExtJsAlert();"/>

[size=large][b]2. ExtJs 之输入框[/b][/size]
[b] 语法：Ext.MessageBox.prompt(String title, String msg,Function fn,Object scope,Boolean/Number multiline);[/b]
[b][color=red] 参数定义：
[list]
[*] title: 标题
[*] msg: 提示内容
[*] fn: 提示框关闭之后自动调用的回调函数
[*] scope: 作用域，用于指定this指向哪里
[*] Boolean/Number:如果为true或为数字，则表示允许输入多行或者指定默认高度
[/list][/color][/b]
例如：

 ExtJsPrompt = function(){
   Ext.MessageBox.prompt("输入框","请输入名字：",function(bu,txt){
     Ext.MessageBox.alert("Result","你点击的是"+bu+"按钮,<br> 输入的内容为："+txt);
});
}
or
 ExtJsPrompt = function(){
   Ext.MessageBox.prompt("输入框","请输入名字：",function(bu,txt){
     Ext.MessageBox.alert("Result","你点击的是"+bu+"按钮,<br> 输入的内容为："+txt);
},this,300);
}

[size=large][b]3.ExtJs之确认框[/b][/size]
语法：
[color=blue][b] Ext.MessageBox.confirm(String title, String msg,Function fn, Object scope);[/b][/color]
[color=red][b] 参数定义：
[list]
[*] title: 标题
[*] msg: 提示内容
[*] fn: 提示框关闭之后自动调用的回调函数
[*] scope: 作用域，用于指定this指向哪里
[/list][/b][/color]例如：

  ExtJsComfirm = function(){
   Ext.MessageBox.confirm("确认"，"请点击下面的按钮作出选择",function(btn{
		Ext.MessageBox.alert("你单击的按钮是："+btn);
	});
}

[size=large][b]4. ExtJs之自定义消息框[/b][/size]
[color=blue][b]语法：
Ext.MessageBox.show(Object config);[/b][/color] config属性说明：
[b][color=red] [list]
[*] title : 消息框标题栏
[*] msg:消息内容
[*] width:消息框的宽度
[*] multiline: 是否显示多行文本
[*] closable:是否显示关闭按钮
[*] buttons:按钮
[*] icon:图标
[*] fn:回调函数
[/list][/color][/b]例如

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

注意： 在ExtJs.MessageBox中已经定义了buttons的取值.如下
[quote]
OK：只有"确定"按钮
CANCEL:只有"取消"按钮
OKCANCEL:有"确定"和"取消"按钮
YESNO: 有"是"和"否"按钮
YESNOCANCEL：有"是"、"否"和"取消"按钮
[/quote]
icons取值如下
[quote]
INFO:信息图标
WARNING:警告图标
QUESTION:询问图标
ERROR:错误图标
[/quote]
5.ExtJs之进度条对话框
进度条对话框也是自定义消息框的一种，只是在配置Config时添progress=true即可,同时在设置其他相关信息，比如进度提示。
下面看看代码：

 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=0; i<13;i++){
     setTimeout(f(i),i*500);
   }
  }

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

6.ExtJs之消息框动画效果
直接看代码

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

在html代码中加入

    <input type="button" value="Animal" id="fly" onclick="ExtJsAnimal();"/>
这里id=fly就是animEL的值