Ext.MessageBox 大集合 不同的dialog图解加写法 出自example

我们知道在Ext中有很多漂亮的dialog，如何做出来在Ext中原带的example中有写。但是为了以后方便用，特写这样一篇博文 以下是效果图和代码还有部分注释， 大家根据自己需要略加修改就好:

1、alert对话框 效果图:

代码:

function a1(){ //alert案例 Ext.MessageBox.alert('title','text'); }

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

效果图:

代码:

Ext.MessageBox.confirm('title','warn test',showres); function showres(btn){ //传入btn 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, //or Ext.MessageBox.OKNOCANCEL, multiline: true, fn: showrestxt }); }

5、progress进度条的show对话框

效果图:

代码:

//进度条对话框 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'); } }; }; 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: 'mb7' }); setTimeout(function(){ //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); }