ExtJS学习之MessageBox
MessageBox为ExtJS中的消息对话框，包括alert confirm prompt show四种。
1.index.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 6 <!-- 引入css文件 --> 7 <link rel="styleSheet" 8 href="extjs/resources/css/ext-all.css"> 9 <!-- 引入js文件 --> 10 <script type="text/javascript" charset="UTF-8" src="extjs/ext-all-debug.js"></script> 11 <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script> 12 13 <script type="text/javascript" src="jquery-1.11.2.js"></script> 14 <script type="text/javascript" src="index.js"></script> 15 16 <title>Ext JS 4.1</title> 17 </head> 18 <body> 19 <h2>Ext JS 4.1</h2> 20 <input type="button" value="confirmShow" onclick="confirmShow();"/><br> 21 <input type="button" value="promptShow" onclick="promptShow();"/><br> 22 <input type="button" value="waitShow" onclick="waitShow();"/><br> 23 <input type="button" value="showShow" onclick="showShow();"/><br> 24 </body> 25 </html>
2.index.js
1 Ext.onReady(function(){ 2 Ext.Msg.alert('Status', 'Changes saved successfully.'); 3 }); 4 function confirmShow(){ 5 Ext.Msg.confirm('提示信息！','输入成功!',function(op){ 6 if(op == 'yes'){ 7 alert('确认了!'); 8 console.info(op); 9 } else { 10 alert('取消了!'); 11 } 12 }); 13 } 14 function promptShow(){ 15 Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){ 16 if (btn == 'ok'){ 17 Ext.MessageBox.alert('提示信息！','输入成功!输入了：'+text); 18 } 19 }); 20 } 21 function waitShow(){ 22 Ext.Msg.wait('提示信息','请等待！' ,{ 23 interval: 100, //执行进度条的间隔时间 24 duration: 4000, //总时长 25 increment: 40, //执行进度条的次数(分几次执行) 26 text: '下载中,请稍后...', //进度条上的文字 27 scope: this, 28 fn: function(){ 29 Ext.MessageBox.alert('提示信息！','下载成功!'); 30 //Ext.MessageBox.hide(); 31 }, 32 animate:true //动画效果 33 }); 34 } 35 function showShow(){ 36 Ext.Msg.show({ 37 title:'自定义提示框' , 38 msg:'内容' , 39 width:300 , 40 height:200 , 41 buttons:Ext.Msg.YES ,//OKCANCEL YESNOCANCEL YES NO 42 icon:Ext.Msg.WARNING // ERROR INFO QUESTION WARNING 43 }); 44 }
