<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第四章：Ext 消息框</title>
<link rel="stylesheet" href="src/ext/resources/css/ext-all.css">
<!--ext-base 必须在ext-all之前引入-->
<script src="src/ext/ext-base.js"></script>
<script src="src/ext/ext-all.js"></script>
<!--<script src="src/ext/ext-lang-zh_CN.js"></script>-->
<style>
button{
margin-bottom: 20px;
}
</style>
</head>
<body>
<button onclick="extJsAlert()">普通弹出框</button> <br>
<button onclick="extJsPrompt()">带输入框的弹出框</button> <br>
<button onclick="extJsCustom()">自定义消息框</button> <br>
<button onclick="extJsProgress()">带有进度条的提示框</button> <br>
<button id="fly" onclick="extJsAnimal()">飞出来吧</button>
<script>
// 普通弹出框
var extJsAlert = function () {
Ext.MessageBox.alert('提示框', '这是一个提示框', function () {
alert('提示框关闭了');
});
};
// 带输入框的弹出框
var extJsPrompt = function () {
Ext.MessageBox.prompt('输入框', '请输入您的姓名：', function (btn, txt) {
Ext.MessageBox.alert('结果', '您点击' + btn + '按钮, <br>输入的内容为' + txt);
}, this, 300);
};
// 自定义消息框
var extJsCustom = function () {
var config = {
title: '自定义对话框',
msg: '这是一个自定义对话框，想怎么搞就怎么搞',
400,
multiline: true,
closable: true,
buttons: Ext.MessageBox.YESNOCANCEL,
icon: Ext.MessageBox.INFO,
fn: function (btn, txt) {
Ext.MessageBox.alert('结果', '您点击 yes 按钮, <br>输入的内容为' + txt);
},
};
Ext.Msg.show(config);
};
// 带有进度条的提示框
var extJsProgress = function () {
Ext.Msg.show({
title: '请等待',
msg: '正在加载项目...',
progerssText: '正在初始化...',
300,
progress: true, // 此属性证明这是一个进度条
closable: false,
});
var f = function (v) {
return function () {
if (v === 12) {
Ext.Msg.hide();
Ext.Msg.alert('完成', '所有项目加载完成');
} else {
var i = v / 11;
Ext.MessageBox.updateProgress(i, Math.round(100 * i) + '% 已完成');
}
};
};
for (var i = 1; i < 13; i++) {
setTimeout(f(i), i * 500);
}
};
// 炫酷的弹出框
var extJsAnimal = function () {
var config = {
title: '飞出来的消息框',
msg: '这是一个自定义对话框，是飞出来的...',
400,
multiline: true,
closable: false,
buttons : Ext.MessageBox.YESNOCANCEL,
icon: Ext.Msg.QUESTION,
animEl : 'fly'
}
Ext.Msg.show(config)
}
</script>
</body>
</html>