ExtJS学习之MessageBox

时间:2023-03-08 23:22:41
ExtJS学习之MessageBox

MessageBox为ExtJS中的消息对话框,包括alert  confirm prompt show四种。

  

1.index.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 引入css文件 -->
<link rel="styleSheet"
href="extjs/resources/css/ext-all.css">
<!-- 引入js文件 -->
<script type="text/javascript" charset="UTF-8" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript" src="index.js"></script> <title>Ext JS 4.1</title>
</head>
<body>
<h2>Ext JS 4.1</h2>
<input type="button" value="confirmShow" onclick="confirmShow();"/><br>
<input type="button" value="promptShow" onclick="promptShow();"/><br>
<input type="button" value="waitShow" onclick="waitShow();"/><br>
<input type="button" value="showShow" onclick="showShow();"/><br>
</body>
</html>

2.index.js

 Ext.onReady(function(){
Ext.Msg.alert('Status', 'Changes saved successfully.');
});
function confirmShow(){
Ext.Msg.confirm('提示信息!','输入成功!',function(op){
if(op == 'yes'){
alert('确认了!');
console.info(op);
} else {
alert('取消了!');
}
});
}
function promptShow(){
Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
if (btn == 'ok'){
Ext.MessageBox.alert('提示信息!','输入成功!输入了:'+text);
}
});
}
function waitShow(){
Ext.Msg.wait('提示信息','请等待!' ,{
interval: 100, //执行进度条的间隔时间
duration: 4000, //总时长
increment: 40, //执行进度条的次数(分几次执行)
text: '下载中,请稍后...', //进度条上的文字
scope: this,
fn: function(){
Ext.MessageBox.alert('提示信息!','下载成功!');
//Ext.MessageBox.hide();
},
animate:true //动画效果
});
}
function showShow(){
Ext.Msg.show({
title:'自定义提示框' ,
msg:'内容' ,
width:300 ,
height:200 ,
buttons:Ext.Msg.YES ,//OKCANCEL YESNOCANCEL YES NO
icon:Ext.Msg.WARNING // ERROR INFO QUESTION WARNING
});
}