//消息框
function extjsAlert(){
Ext.MessageBox.alert("提示框","这是一个提示框",function(){
alert("提示框已经关闭");
})
}
//输入框
function extjsPrompt(){
Ext.MessageBox.prompt("输入框","请输入您的姓名：",function(btn,txt){
Ext.MessageBox.alert("结果","您点击了"+btn+"按钮，输入的内容为 "+txt);
})
}
//Ext.MessageBox.prompt(String title,String msg,Function fn,Object scope,Boolean/Number multiline)
//从定义来看，最后的一个参数，如果为ture或者为数字，则将允许输入多行或者指定默认的高度
function extjsPrompt2(){
Ext.MessageBox.prompt("输入框","请输入您的姓名：",function(btn,txt){
Ext.MessageBox.alert("结果","您点击了"+btn+"按钮，输入的内容为 "+txt);
},this,300);
}
//确认框
function extjsConfirm(){
Ext.MessageBox.confirm("确认","这点击按钮作出选择",function(btn){
Ext.MessageBox.alert("您点击的按钮是："+btn);
})
}
//会飞的消息框
function extjsAnimal(){
var config = {
title :"飞出的消息框",
msg : "你猜他什么时候飞过来？",
width:300,
multiline:true,
closable:true,
buttons:Ext.MessageBox.YESNOCANCEL,
icon:Ext.MessageBox.QUESTION,
animEl:"fly"//fly 为按钮的id
}
Ext.MessageBox.show(config);
}
//自定义消息框，Ext.MessageBox.show(Object config)可是自定义消息框，
//config这个参数包络万象，使用json格式传输信息到方法中即可
//config的常见属性 ：title ，msg，width，multiline，closable，buttons，icon，fn
function MyExtjsBox(){
var config = {
title:"自定义对话框",
msg:"喜欢自定义的框框吗？",
width:300,
multiline:false,
closable:false,
buttons:Ext.MessageBox.YESNOCANCEL,
fn:function(btn,txt){
console.log(btn);
Ext.MessageBox.alert("提示","您点击了"+btn+"按钮，输入的值是："+txt);
}
}
Ext.MessageBox.show(config);
}
//进度条对话框，也是一个自定义的消息框，配置config的时候添加了progress=true即可，同时还可以设置其他的相关信息
function extjsProgress(){
var config={
title:"请等待",
msg:"正在加载项目",
progressText:"正在初始化...",
width:300,
progress:true,
closable:false
}
Ext.MessageBox.show(config);
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);
}
}
测试：
<html>
<head>
<title>Ext Buttons</title>
<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" src="buttons.js"></script>
</head>
<body>
<h1>消息框测试</h1>
<p>
<input type="button" value="提示框" id="alertBox" onclick="extjsAlert();"><br>
<input type="button" value="输入框" id="inputBox" onclick="extjsPrompt2();"><br>
<input type="button" value="确认框" id="confirmBox" onclick="extjsConfirm();"><br>
<input type="button" value="会飞的框" id="fly" onclick="extjsAnimal();"><br>
<input type="button" value="自定义的框" id="mybox" onclick="MyExtjsBox();"><br>
<input type="button" value="进度条的框" id="progerssBox" onclick="extjsProgress();"><br>
</p>
</body>
</html>
时间： 2024-10-25 19:25:37