extjs学习笔记-----消息框002
1.提示框
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/resources/css/ext-all.css" />
<script type="text/javascript" src="<%=basePath%>ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=basePath%>ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function (){
/*
Ext的消息框
Ext.MessageBox.alert(String title,String message,Function fn,Object scope);
title:标题
message:提示消息
fn:提示框关闭后自动调用的回调函数
scope:作用域
*/
Ext.MessageBox.alert("提示框","提示信息");
Ext.MessageBox.alert("提示框","这是提示信息",function(){
alert("123456");
});
})
</script>
</head>
<body>
</body>
</html>
2.输入框：
<script type="text/javascript">
Ext.onReady(function (){
/**
* Ext.MessageBox.prompt(String title,String msg,Function fn,Object scope,Boolean/Number multiline)
* title:标题
* msg:提示信息
* fn:提示框关闭后自动调用的函数
* scope:作用域
* 最后一个参数：为true或者是数字将允许输入多行或者指定默认高度。
*/
Ext.MessageBox.prompt("输入框","输入你的姓名",function(button,text){
Ext.MessageBox.alert("结果","你点击了"+button+"按扭，<br>输入的内容为"+text);
});
})
</script>
3.确认框：
<script type="text/javascript">
Ext.onReady(function (){
/**
* Ext.MessageBox.confirm(String title,String msg,Function fn,Object scope)
* title:标题
* msg:提示信息
* fn:提示框关闭后自动调用的函数
* scope:作用域
*/
Ext.MessageBox.confirm("确认框","请点击下面的按钮做出选择",function(button){
Ext.MessageBox.alert("提示框","你点击的按钮是"+button);
})
});
</script>
4.自定义对话框：
Ext.onReady(function (){
/**
* Ext.MessageBox.show(Object config);
* config可以使用json格式可以传输很多信息到方法中,config中常见属性如下：
* title：标题
* msg：信息内容
* width：消息框的宽度
* multiline：是否显示多行文本
* closable：是否显示关闭按钮
* buttons：按钮
* icon：图标
* fn：回调函数
*/
var config={
title:"自定义对话框",
msg:"这是一个自定对话框",
width:400,
multiline:true,
closable:true,
buttons:Ext.MessageBox.YESNOCANCEL,
icon:Ext.MessageBox.QUESTION,
fn:function(button,text){
Ext.MessageBox.alert("提示框","你点击的按钮是"+button+"<br>输入的值是"+text);
}
}
Ext.MessageBox.show(config);
});
5.进度条
Ext.onReady(function (){
var config={
title:"请等待",
msg:"正在加载项目...",
progressText:"正在初始化...",
width:300,
progress:true//此属性证明这是一个进度条
};
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=0;i<13;i++){
setTimeout(f(i),i*500);
}
});
6.弹出框动画效果
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/resources/css/ext-all.css" />
<script type="text/javascript" src="<%=basePath%>ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=basePath%>ext/ext-all.js"></script>
<script type="text/javascript">
var extjsAnimal = function(){
var config={
title:"飞出的消息框",
msg:"这是一个自定义对话框",
width:400,
multiline:true,
closable:false,
buttons:Ext.MessageBox.YESNOCANCEL,
icon:Ext.MessageBox.QUESTION,
animEl:"fly"
};
Ext.MessageBox.show(config);
}
</script>
</head>
<body>
<input type="button" value="Animal" id="fly" onclick="extjsAnimal();"/>
</body>
</html>