ExtJS自学笔记1---各种消息框、进度条
<html>
<head>
<title></title>
<link href="ext/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src=\'#\'" /bootstrap.js"></script>
<script type="text/javascript" src=\'#\'" /ext-all.js"></script>
<script type="text/javascript" src=\'#\'" /ext-lang-zh_CN.js"></script>
<script type="text/javascript">
/*提示框
语法：Ext.MessageBox. alert ( String title, String msg, Function fn, Object scope );
参数定义如下：
1、 title：标题
2、 msg：提示内容
3、 fn：提示框关闭后自动调用的回调函数
4、 scope：作用域，用于指定this指向哪里，一般不用管他，特殊情况下有用
*/
extjsAlert = function(){
Ext.MessageBox.alert("提示框","这是一个提示框!",function(){
alert("提示框已经关闭");
});
}
/*输入框 用来提示输入字符串，相当于window.prompt()方法
语法：Ext.MessageBox.prompt(String title,String msg, Function fn,
Object scope, Boolean/Number multiline )
前四个参数和提示框一样，最后多了一个参数，如果为true 或为数字，
将允许输入多行或者指定默认高度（像素）
*/
extjsPrompt = function(){
Ext.MessageBox.prompt("输入框","请输入你的姓名：",function(btn,txt){
Ext.MessageBox.alert("结果","你点击了"+btn+"按钮,<br>输入的内容为："+txt);
},this,300);
}
/*确认框
语法：Ext.MessageBox.confirm ( String title, String msg, Function fn, Object scope )
参数同提示框一样
*/
extjsConfirm = function(){
Ext.MessageBox.confirm("确认","请点击以下按钮做出选择",function(btn){
Ext.MessageBox.alert("提示框","你单击的按钮是"+btn);
});
}
/*自定义消息框
语法：Ext.MessageBox.show(Object config)
config中常见属性如下：
title：消息框标题栏
msg：消息内容
width：消息框的宽度
multiline：是否显示多行文本
closable：是否显示右上角关闭按钮
buttons：按钮
icon：图标
fn：回调函数
*/
extjsCustom = function(){
var config = {
title : "自定义消息框",
msg : "这是一个自定义对话框",
width : 400,
multiline : true,
closable : false,
buttons : Ext.MessageBox.YESNOCANCEL,
icon : Ext.MessageBox.QUESTION,
fn : function(btn,txt){
Ext.MessageBox.alert("结果","您点击了"+btn+"按钮,<br>输入的值是："+txt);
}
};
Ext.MessageBox.show(config);
}
/*
buttons（按钮）的取值如下：
OK：只有"确定"按钮
CANCEL：只有"取消"按钮
OKCANCEL：有"确定"和"取消"按钮
YESNO：有"是"和"否"按钮
YESNOCANCEL：有"是"、"否"和"取消"按钮
icons（图标）取值如下：
INFO：信息图标
WARNING：警告图标
QUESTION：询问图标
ERROR：错误图标
*/
/*进度条
进度条对话框也是一个自定义消息框，配置config 时添时progress:true或wait:true
*/
extjsProgress1 = function(){
Ext.MessageBox.show({
title : "请等待",
msg : "正在加载...",
progressText : "正在初始化...",//进度条滚动之前最初的文本
width : 300,
progress : true,//此属性证明这是一个进度条
closable : false
});
var f = function(v){
return function(){
if(v==12){
Ext.MessageBox.hide();
Ext.MessageBox.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);
}
}
/*
在上面的代码中，progressText 属性是进度条滚动之前最初的文本，滚动进程由
updateProgress(Number value, String progressText)方法来定义，参数value是从0~1之间的小
数，表示进度百分比；progressText 则表示进度条滚动过程中的文本提示信息，如
Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% 已完成');。
*/
function extjsProgress2() {
var progressBar=Ext.Msg.show({
title:"标题",
msg:"通过固定时间完成进度",
width:300,
wait:true,//此属性证明这是一个进度条
waitConfig:{
interval:500, // 每次进度的时间间隔
duration:5000,// 进度条跑动的持续时间
fn:function () {
Ext.Msg.hide();
Ext.MessageBox.alert("完成","加载已完成");
}},
closable:false
});
}
</script>
</head>
<body>
<div> </div>
<div>
<input type="button" id="" value="提示框按钮" onclick="extjsAlert();">
<input type="button" id="" value="输入框按钮" onclick="extjsPrompt();">
<input type="button" id="" value="确认框按钮" onclick="extjsConfirm();">
<input type="button" id="" value="自定义消息框按钮" onclick="extjsCustom();">
<input type="button" id="" value="进度条按钮1" onclick="extjsProgress1();">
<input type="button" id="" value="进度条按钮2"
</div>
</body>
<html>