叶罗丽精灵梦之重生:extjs 弹出框，消息框

来源：百度文库 编辑：中财网 时间：2024/04/28 06:13:02

 
  

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

   例如：
Js代码  
  1.      
  2.  ExtJsAlert = function(){   
  3.     Ext.MessageBox.alert("提示框"，"这是一个提示框");   
  4.   }   
  5.  or   
  6.  ExtJsAlert = function(){   
  7.    Ext.MessageBox.alert("提示框"，"这是一个提示框",function(){   
  8.      alert("提示框关闭")   
  9. });    
  10. }  
view plaincopy to clipboardprint?
  1.     
  2.  ExtJsAlert = function(){  
  3.     Ext.MessageBox.alert("提示框"，"这是一个提示框");  
  4.   }  
  5.  or  
  6.  ExtJsAlert = function(){  
  7.    Ext.MessageBox.alert("提示框"，"这是一个提示框",function(){  
  8.      alert("提示框关闭")  
  9. });   
  10. }  

如果要将上面的代码运行，则要将改源码保存JS，然后导入页面中，增加
Html代码  
  1.   
view plaincopy to clipboardprint?
  1.   


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

例如：
Js代码  
  1.  ExtJsPrompt = function(){   
  2.    Ext.MessageBox.prompt("输入框","请输入名字：",function(bu,txt){   
  3.      Ext.MessageBox.alert("Result","你点击的是"+bu+"按钮,
     输入的内容为："+txt);   
  4. });   
  5. }   
  6. or   
  7.  ExtJsPrompt = function(){   
  8.    Ext.MessageBox.prompt("输入框","请输入名字：",function(bu,txt){   
  9.      Ext.MessageBox.alert("Result","你点击的是"+bu+"按钮,
     输入的内容为："+txt);   
  10. },this,300);   
  11. }  
view plaincopy to clipboardprint?
  1.  ExtJsPrompt = function(){  
  2.    Ext.MessageBox.prompt("输入框","请输入名字：",function(bu,txt){  
  3.      Ext.MessageBox.alert("Result","你点击的是"+bu+"按钮,
     输入的内容为："+txt);  
  4. });  
  5. }  
  6. or  
  7.  ExtJsPrompt = function(){  
  8.    Ext.MessageBox.prompt("输入框","请输入名字：",function(bu,txt){  
  9.      Ext.MessageBox.alert("Result","你点击的是"+bu+"按钮,
     输入的内容为："+txt);  
  10. },this,300);  
  11. }  


3.ExtJs之确认框
语法：
  Ext.MessageBox.confirm(String title, String msg,Function fn, Object scope);
  参数定义：
  
  • title: 标题
  • msg: 提示内容
  • fn: 提示框关闭之后自动调用的回调函数
  • scope: 作用域，用于指定this指向哪里
例如：
Js代码  
  1.   ExtJsComfirm = function(){   
  2.    Ext.MessageBox.confirm("确认"，"请点击下面的按钮作出选择",function(btn{   
  3.         Ext.MessageBox.alert("你单击的按钮是："+btn);   
  4.     });   
  5. }  
view plaincopy to clipboardprint?
  1.   ExtJsComfirm = function(){  
  2.    Ext.MessageBox.confirm("确认"，"请点击下面的按钮作出选择",function(btn{  
  3.         Ext.MessageBox.alert("你单击的按钮是："+btn);  
  4.     });  
  5. }  

4. ExtJs之自定义消息框
  语法：
    Ext.MessageBox.show(Object config);  config属性说明：
  • title : 消息框标题栏
  • msg:消息内容
  • width:消息框的宽度
  • multiline: 是否显示多行文本
  • closable:是否显示关闭按钮
  • buttons:按钮
  • icon:图标
  • fn:回调函数
例如
Js代码  
  1. ExtJsCustom = function(){   
  2.   var config ={   
  3.     title:"自定义对话框",   
  4.     msg:"这是一个自定义对话框",   
  5.     width:400,   
  6.     multiline:true,   
  7.     closable:false,   
  8.     buttons:Ext.MessageBox.YESNOCANCEL,   
  9.     icon:Ext.MessageBox.QUESTION,   
  10.     fn:  function(btn,txt){   
  11.    Ext.MessageBox.alert("Result","你点击了'yes'按钮
    ,输入的值是："+txt);   
  12.   
  13.  };   
  14. Ext.MessageBox.show(config);   
  15. }  
view plaincopy to clipboardprint?
  1. ExtJsCustom = function(){  
  2.   var config ={  
  3.     title:"自定义对话框",  
  4.     msg:"这是一个自定义对话框",  
  5.     width:400,  
  6.     multiline:true,  
  7.     closable:false,  
  8.     buttons:Ext.MessageBox.YESNOCANCEL,  
  9.     icon:Ext.MessageBox.QUESTION,  
  10.     fn:  function(btn,txt){  
  11.    Ext.MessageBox.alert("Result","你点击了'yes'按钮
    ,输入的值是："+txt);  
  12.   
  13.  };  
  14. Ext.MessageBox.show(config);  
  15. }  

注意： 在ExtJs.MessageBox中已经定义了buttons的取值.如下
引用
OK：只有"确定"按钮
CANCEL:只有"取消"按钮
OKCANCEL:有"确定"和"取消"按钮
YESNO: 有"是"和"否"按钮
YESNOCANCEL：有"是"、"否"和"取消"按钮

icons取值如下
引用
  INFO:信息图标
  WARNING:警告图标
  QUESTION:询问图标
  ERROR:错误图标

5.ExtJs之进度条对话框
    进度条对话框也是自定义消息框的一种，只是在配置Config时添progress=true即可,同时在设置其他相关信息，比如进度提示。
下面看看代码：
Js代码  
  1. ExtJsProgress = function(){   
  2.     Ext.MessageBox.show({   
  3.        title:'请等待片刻',   
  4.        msg:'正在加载项目....',   
  5.        progressText:'正在初始化...',   
  6.        Width:300,   
  7.        progress:true,   
  8.        closable:false  
  9.    });   
  10.   var f = function(v){   
  11.       return function(){   
  12.         if(v == 12){   
  13.             Ext.MessageBox.hide();   
  14.             Ext.MessageBox.alert('完成','所有项目加载完成!');   
  15.          }else{   
  16.              var i = v/11;   
  17.             Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%以完成');   
  18.           }   
  19.       };   
  20.  };   
  21.   for(var i=0; i<13;i++){   
  22.     setTimeout(f(i),i*500);   
  23.   }   
  24.  }  
view plaincopy to clipboardprint?
  1. ExtJsProgress = function(){  
  2.     Ext.MessageBox.show({  
  3.        title:'请等待片刻',  
  4.        msg:'正在加载项目....',  
  5.        progressText:'正在初始化...',  
  6.        Width:300,  
  7.        progress:true,  
  8.        closable:false  
  9.    });  
  10.   var f = function(v){  
  11.       return function(){  
  12.         if(v == 12){  
  13.             Ext.MessageBox.hide();  
  14.             Ext.MessageBox.alert('完成','所有项目加载完成!');  
  15.          }else{  
  16.              var i = v/11;  
  17.             Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%以完成');  
  18.           }  
  19.       };  
  20.  };  
  21.   for(var i=0; i<13;i++){  
  22.     setTimeout(f(i),i*500);  
  23.   }  
  24.  }  

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

6.ExtJs之消息框动画效果
  直接看代码
Js代码  
  1. ExtJsAnimal = funciton(){   
  2.     var config = {   
  3.        title:"飞出的消息框",   
  4.        msg:"这是一个自定义对话框，是飞出来的哦",   
  5.        width:400,   
  6.        multiline:true,   
  7.        closable:false,   
  8.        buttons:Ext.MessageBox.YESNOCANCEL,   
  9.        icon:Ext.MessageBox.QUESTION,   
  10.        animEl:"fly"  
  11.      };   
  12.      Ext.MessageBox.show(config);   
  13.  }  
view plaincopy to clipboardprint?
  1. ExtJsAnimal = funciton(){  
  2.     var config = {  
  3.        title:"飞出的消息框",  
  4.        msg:"这是一个自定义对话框，是飞出来的哦",  
  5.        width:400,  
  6.        multiline:true,  
  7.        closable:false,  
  8.        buttons:Ext.MessageBox.YESNOCANCEL,  
  9.        icon:Ext.MessageBox.QUESTION,  
  10.        animEl:"fly"  
  11.      };  
  12.      Ext.MessageBox.show(config);  
  13.  }  

在html代码中加入
Html代码  
  1.   
  2. =fly就是animEL的值 
安装显卡驱动的时候弹出消息框 怎样用vbscript的MsgBox 函数控制弹出提示框对话框中显示消息 聊天消息自动弹出 QQ弹出消息铃声 禁止弹出消息对话框 msn7.5,我要发消息,会弹出"需要Flash player"的提示框.收发的消息在上面的对话框没有显示. 请问下，我重装了系统(xp)，现在老是不定期弹出一个什么信使消息什么的框，请问怎么不让它弹出来？ 系统在启动后弹出一消息框,说找不到某某文件什么的,这种情况下用什么修复系统? 伪装QQ消息框 怎么消除那个消息框??? vc消息框显示变量 在使用锐捷时，会弹出消息框“目前系统工作环境与软件运行环境相冲突，软件不能正常运行！\n(Code: 2” 我的电脑开时间长了有时会弹出个消息框提示有什么工程！我是嫩手，求高手支一招！谢谢！ 怎么样拒绝qq的弹出消息阿？ 这样才能阻止qq系统消息的弹出？ 用dos命令弹出消息窗口 MSN怎么不弹出消息对话框? 怎样阻止QQ弹出的系统消息 如何阻止QQ 新闻 消息弹出？ 怎样阻止systeres弹出的消息？ 如何阻止QQ消息对话框自动弹出 有广告框弹出 弹出出错框 弹出两个警告框