Ext--MessageBox教程
<html>
<head>
<link rel="stylesheet" type="text/css" href="./ext-all.css" />
<script type="text/javascript" src="./ext-base.js"></script>
<script type="text/javascript" src="./ext-all.js"></script>
<script type="text/javascript">
// 一定要 onReady开始 不然第一次点击按钮会没有反映，要点击第二次才有反映的，因为第一次点击变成加载了！
Ext.onReady(function(){
//alert 提示框
Ext.get('mb8').on('click', function(e){
Ext.MessageBox.alert('Status', 'Changes saved successfully.',showResult);
});
// 选择框
Ext.get('mb1').on('click', function(e){
Ext.MessageBox.confirm('选择','你是否确定?',showResult);
});
// 对话框
Ext.get('prompt').on('click', function(e){
Ext.MessageBox.prompt('对话框','请输入你的名字?',showResult2);
});
// 文本域对话框
Ext.get('mprompt').on('click', function(e){
Ext.MessageBox.show({
title: 'Address',
msg: 'Please enter your address:',
width:300,
buttons: Ext.MessageBox.OKCANCEL,
multiline: true,
fn: showResult2,
animEl: 'mprompt'
});
});
//进度条
Ext.get('progress').on('click', function(){
Ext.MessageBox.show({
title: 'Please wait',
msg: 'Loading items...',
progressText: 'Initializing...',
width:300,
progress:true,
closable:false,
animEl: 'mb6'
});
// 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);
}
});
//保存
Ext.get('save').on('click', function(){
// alert(Ext.MessageBox.ERROR);
Ext.MessageBox.show({
msg: 'Saving your data, please wait...',
progressText: 'Saving...',
width:300,
wait:true,
waitConfig: {interval:200},
icon:Ext.MessageBox.INFO, //这里可以自定义图片的，要修改到 ext-all.css 文件里面(个人做法)
animEl: 'save'
});
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!');
Ext.MessageBox.alert('Status', 'Changes saved successfully.');
}, 8000);
});
function showResult(btn){
Ext.MessageBox.alert('内容',btn);
}
function showResult2(btn,text){
if(btn == 'ok')
Ext.MessageBox.alert('内容2',text);
else
Ext.MessageBox.alert('内容2',btn);
}
});
</script>
</head>
<body>
<center>
<div style="width:800px;height:300px;border:1px groove pink">
<table style='width:800px;height:300px'>
<tr>
<td>
<button id='mb1' style='width:128px'>Confirm </button>
</td>
</tr>
<tr>
<td>
<button id='mb8' style='width:128px'>Alert</button>
</td>
</tr>
<tr>
<td>
<button id='progress' style='width:128px'>Progress </button>
</td>
</tr>
<tr>
<td>
<button id='save' style='width:128px'>Save </button>
</td>
</tr>
<tr>
<td>
<button id='prompt' style='width:128px'>Prompt </button>
</td>
</tr>
<tr>
<td>
<button id='mprompt' style='width:128px'>M Prompt </button>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
有些源码和样式我都进行修改过！如果需要可以下载来看！