首页 > 代码库 > extjs各种弹出框

extjs各种弹出框

2024-08-03 05:30:54   221人阅读

1.ExtJs之消息框：
  语法：Ext.MessageBox.alert(String title, String msg,Function fn, Obejct scope);   参数定义： 
  
  • title: 标题
  • msg: 提示内容
  • fn: 提示框关闭之后自动调用的回调函数
  • scope: 作用域，用于指定this指向哪里
[javascript] view plaincopy
  1. Ext.MessageBox.alert("提示框"，"这是一个提示框");  
  2. Ext.MessageBox.alert("提示框"，"这是一个提示框",function(){    
  3.      alert("提示框关闭")    
  4. });  
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
  1. Ext.MessageBox.prompt("输入框","请输入名字：",function(bu,txt){    
  2.      Ext.MessageBox.alert("Result","你点击的是"+bu+"按钮,<br> 输入的内容为："+txt);    
  3. },this,300); 
3.ExtJs之确认框 
语法： 
  Ext.MessageBox.confirm(String title, String msg,Function fn, Object scope); 
  参数定义：    
  • title: 标题
  • msg: 提示内容
  • fn: 提示框关闭之后自动调用的回调函数
  • scope: 作用域，用于指定this指向哪里
[javascript] view plaincopy
  1. Ext.MessageBox.confirm("确认"，"请点击下面的按钮作出选择",function(btn{    
  2.         Ext.MessageBox.alert("你单击的按钮是："+btn);    
  3. }); 

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

  • title : 消息框标题栏
  • msg:消息内容
  • width:消息框的宽度
  • multiline: 是否显示多行文本
  • closable:是否显示关闭按钮
  • buttons:按钮
  • icon:图标
  • fn:回调函数
[javascript] view plaincopy
  1. var config ={    
  2.     title:"自定义对话框",    
  3.     msg:"这是一个自定义对话框",    
  4.     width:400,    
  5.     multiline:true,    
  6.     closable:false,    
  7.     buttons:Ext.MessageBox.YESNOCANCEL,    
  8.     icon:Ext.MessageBox.QUESTION,    
  9.     fn:  function(btn,txt){    
  10.    Ext.MessageBox.alert("Result","你点击了‘yes‘按钮<br>,输入的值是："+txt);    
  11.     
  12.  };    
  13. 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
  1. Ext.MessageBox.show({    
  2.        title:‘请等待片刻‘,    
  3.        msg:‘正在加载项目....‘,    
  4.        progressText:‘正在初始化...‘,    
  5.        Width:300,    
  6.        progress:true,    
  7.        closable:false    
  8.    });    
  9.   var f = function(v){    
  10.       return function(){    
  11.         if(v == 12){    
  12.             Ext.MessageBox.hide();    
  13.             Ext.MessageBox.alert(‘完成‘,‘所有项目加载完成!‘);    
  14.          }else{    
  15.              var i = v/11;    
  16.             Ext.MessageBox.updateProgress(i,Math.round(100*i)+‘%以完成‘);    
  17.           }    
  18.       };    
  19.  };    
  20.   for(var i=0; i<13;i++){    
  21.     setTimeout(f(i),i*500);    
  22.   } 

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

 

6.ExtJs之消息框动画效果 

[javascript] view plaincopy
  1. var config = {    
  2.        title:"飞出的消息框",    
  3.        msg:"这是一个自定义对话框，是飞出来的哦",    
  4.        width:400,    
  5.        multiline:true,    
  6.        closable:false,    
  7.        buttons:Ext.MessageBox.YESNOCANCEL,    
  8.        icon:Ext.MessageBox.QUESTION,    
  9.        animEl:"fly"    
  10.      };    
  11.      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);

extjs各种弹出框


联系
我们