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" οnclick="extjsAnimal();"/>
</body>
</html>
