【编程技巧】Ext.MessageBox 大集合 不同的dialog图解加写法

1、alert对话框
效果图:

 

function a1(){

Ext.MessageBox.alert('title','text');  } 

2、confirm案例，确定不确定2个按钮对话框

效果图:

代码:

Ext.MessageBox.confirm('title','warn test',showres);
function showres(btn){   //传入btn,这里指的是YES,NO
alert(btn);
}

 3、prompt案例,带有输入框的对话框

效果图:

代码:

function p1(){
Ext.MessageBox.prompt('title','请输入一些文档',showrestxt);
}
function showrestxt(btn,text){
alert(btn);
alert(text);
}

 

4、带有输入框的对象框show

效果图:

代码:

function s1(){
//可以写带有图片的确认框,自定义确认框
Ext.MessageBox.show({
          title: 'Address',
          msg: 'Please enter your address:',
          width:300,
          buttons: Ext.MessageBox.OKCANCEL,   //你也可以自定义按钮上面的字：{"ok","我本来是ok的"}。
          multiline: true,
          fn: showrestxt
      });
}

 

5、progress进度条的show对话框   //第一种：（通过进度的大小控制进度，满进度为1）

效果图:

代码:

//进度条对话框
function s2(){
Ext.MessageBox.show({
          title: 'Please wait',
          msg: 'Loading items...',
          progressText: 'Initializing...',
          width:300,
          progress:true,
          closable:false
      });
      
       // this hideous block creates the bogus progress 进度条程序
      var f = function(v){
           return function(){
               if(v == 12){
                   Ext.MessageBox.hide();
                   Ext.example.msg('Done', 'Your fake items were loaded!');
               }else{
                   var i = v/11;
                   Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed');
      //注意i为0-1之间的数，表示进度条的进度.               }
          };
      };
      for(var i = 1; i < 13; i++){
          setTimeout(f(i), i*500);
      }
}

 

6、保存对话框带进度对话框（图片文件未加入）    //第二种：（通过固定时间控制进度加载）

效果图:

 

代码:/下载时候图像的对话框
function downl(){
Ext.MessageBox.show({
          msg: 'Saving your data, please wait...',
          progressText: 'Saving...',
          width:300,
          wait:true,
          waitConfig: {interval:200},
          icon:'ext-mb-download', //custom class in msg-box.html
          animEl: 'elId'       //这是一个控制跳出的框飞行的属性   animEl: 'elId',说明html里ID属性<input type="button" id='elId' onclick=xxxx();/>
      });
       setTimeout(function(){                       //setTimeout 是指等待多长时间，就调用的意思
           //This simulates a long-running operation like a database save or XHR call.
           //In real code, this would be in a callback function.
           Ext.MessageBox.hide();
           Ext.example.msg('Done', 'Your fake data was saved!');
       }, 8000);
}

-------------------------------------------------

closable:如果为false，则不显示右上角的小叉叉，默认为true。

prompt：设为true，则弹出框带有输入框

multiline：设为true，则弹出框带有多行输入框

progress:设为true，显示进度条，（但是是死的）

wait：设为true，动态显示progress

waitConfig:配置参数，以控制显示progress