https://blog.csdn.net/alsyuan/article/details/73240841
Ext.MessageBox.alert()
Ext.MessageBox.alert()提供一個OK按鈕。對應JavaScript中的alert()。
定義：alert( Stringtitle,Stringmsg,[Function fn], [Object scope] ) :Ext.MessageBox
該函數有4個參數：
Title:窗口標題
Msg:彈出窗口內容
Fn:回調函數，在單擊按鈕或單擊右上角的關閉圖標X后執行。並且攜帶一個參數，即按鈕的Id。
Scope：作用范圍。
示例：
// alert
Ext.get("alert").on("click",function() {
Ext.MessageBox.alert("標題","這是提示的內容",function(r) {
alert(r);
});
});
<</span>input type="button" value="alert"id="alert">
在按鈕alert上綁定click事件，單擊時彈出alert窗口，單擊OK按鈕后，調用回調函數彈出按鈕id。
單擊alert按鈕，
單擊OK按鈕，
單擊右上角的X，則返回cancel。
24.2Ext.MessageBox.confirm()
選擇對話框，提供一個Yes，一個No供用戶選擇是/否。對應JavaScript中的confirm()。
定義：
confirm( Stringtitle,Stringmsg,[Function fn], [Object scope] ) :Ext.MessageBox
該函數有4個參數：
Title:窗口標題
Msg:彈出窗口內容
Fn:回調函數，在單擊按鈕或單擊右上角的關閉圖標X后執行。並且攜帶一個參數，即按鈕的Id。
Scope：作用范圍。
示例：
// confirm
Ext.get("confirm").on("click",function() {
Ext.MessageBox.confirm("標題","確認執行此項操作嗎？",function(r) {
alert(r);
});
});
<</span>input type="button" value="confirm"id="confirm">
單擊confirm按鈕：
單擊Yes返回yes；單擊No返回No；單擊X返回No。
24.3Ext.MessageBox.prompt()
用戶可以輸入內容，對應JavaScript中的prompt();
定義：
prompt( Stringtitle,Stringmsg,[Function fn], [Object scope], [Boolean/Number multiline], [String value] ) :Ext.MessageBox
參數：
Title：標題
Msg：內容
Fn：回調函數。
Scope：作用范圍
Multiline：是否多行，默認單行。
Value：輸入框的默認值。
24.3.1單行輸入框
示例：
// prompt
Ext.get("prompt").on("click",function() {
Ext.MessageBox.prompt("提示","請輸入你的名字",function(btn,value) {
alert("你選擇了" + btn + ",你輸入的內容是：" + value);
},this,false,"劉德華");
});
<</span>input type="button" value="prompt"id="prompt">
單擊prompt按鈕：
單擊OK返回OK，單擊Cancel返回cancel，單擊X返回cancel。
24.3.2多行輸入框
24.3.2.1使用Ext.MessageBox.prompt()函數實現
多行輸入對話框，將multiline設置為TRUE即可。
// prompt
Ext.get("prompt").on("click",function() {
Ext.MessageBox.prompt("提示","請輸入你的名字",function(btn,value) {
alert("你選擇了" + btn + ",你輸入的內容是：" + value);
},this,true,"劉德華");
});
<</span>input type="button" value="prompt"id="prompt">
24.4.2.2使用Ext.MessageBox.show()實現
使用ext.MessageBox.show()函數，我們可以自行定義彈出窗口。
Ext.MessageBox.show({
title:"提示",
msg:"請輸入你的名字",
width:300,
value:"劉德華",
buttons:Ext.MessageBox.OKCANCEL,
multiline:true,
fn:function(btn,val) {
alert("你選擇了" + btn + ",你輸入的內容是：" + val);
}
});
參數：
Title：標題
Msg：彈出窗口提示內容
Width:彈出窗口寬度
Value:彈出窗口輸入框默認值
Buttons:彈出窗口按鈕
Multiline:是否多行輸入
Fn:回調函數。
24.4自定義對話框
在24.3.2.2中我們使用Ext.MessageBox.show()函數實現了能多行輸入的提示窗口。
Show()函數中,buttons我們可以選擇的按鈕有：
CANCEL:cancel
OK：ok
OKCANCEL:ok and cancelbuttons
YESNO:yes and no buttons
YESNOCANCEL:yes、no、cancel buttons
彈出窗口的圖標(icon)：
ERROR:錯誤
INFO：消息
QUESTION：疑問
WARNING：警告
我們可以利用這些自定義按鈕和圖標。
例：
Ext.MessageBox.show({
title:"提示",
msg:"請輸入你的名字",
width:300,
value:"劉德華",
buttons:Ext.MessageBox.OKCANCEL,
icon:Ext.MessageBox.ERROR,
multiline:true,
fn:function(btn,val) {
alert("你選擇了" + btn + ",你輸入的內容是：" + val);
}
});
效果：
24.5進度條
Ext.MessageBox提供了默認的進度條，只需要將progress設置為TRUE即可。
示例：
Ext.MessageBox.show({
width:300, // 彈出窗口寬度
title:"提示", // 彈出窗口標題
msg:"正在讀取數據...", // 彈出窗口內容
progress:true, // 是否是進度條
closable:false // 是否可以關閉
});
效果：
但是，這樣進度條是不會動的。
我們需要調用Ext.MessageBox.updateProgress()來更新進度條。
函數定義：
updateProgress( Numbervalue,StringprogressText,Stringmsg ): Ext.MessageBox
24.5使用進度條保存數據
示例：
var box =Ext.MessageBox.show({
width:300,
title:"提示",
msg:"正在保存,請稍后...",
progress:true,
closable:false,
wait:true,
waitConfig:{
interval:500
}
});
Ext.Ajax.request({
url:"./jsp/progress.jsp",
params:{
date:new Date().toLocaleString()
},
method:"POST",
success:function(r) {
Ext.MessageBox.hide();
Ext.Msg.show({
title:"提示",
msg:r.responseText
});
},
failure:function(r){
Ext.MessageBox.hide();
Ext.Msg.show({
title:"提示",
msg:"操作失敗"
});
}
});
});
Progress.jsp:
String date = request.getParameter("date");
System.out.println(date);
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
Thread.sleep(5000L);
response.getWriter().write("數據保存成功！提交時間：" + date);
在jsp中，暫停5S模擬操作數據庫的過程，然后返回成功信息。
效果：
單擊保存后：
后台返回數據后：
24.6Ext.Window
示例：
// Create tabs and add it into window
var tabs= new Ext.TabPanel({
activeTab:0,
defaults:{autoScroll:true},
region:"center",
items:[
{title:"標簽1",html:"內容1"},
{title:"標簽2",html:"內容2"},
{title:"標簽3",html:"內容3",closable:true}
]
});
var p = new Ext.Panel({
title:"導航",
width:150,
region:"west",
split:true,
collapsible:true
});
// Create a window
varwindow = new Ext.Window({
title:"登陸", // 窗口標題
width:700, // 窗口寬度
height:350, // 窗口高度
layout:"border",// 布局
minimizable:true, // 最大化
maximizable:true, // 最小化
frame:true,
constrain:true, // 防止窗口超出瀏覽器窗口,保證不會越過瀏覽器邊界
buttonAlign:"center", // 按鈕顯示的位置
modal:true, // 模式窗口，彈出窗口后屏蔽掉其他組建
resizable:false, // 是否可以調整窗口大小，默認TRUE。
plain:true,// 將窗口變為半透明狀態。
items:[p,tabs],
buttons:[{
text:"登陸",
handler:function() {
Ext.Msg.alert("提示","登陸成功!");
}
}],
closeAction:'hide'//hide:單擊關閉圖標后隱藏，可以調用show()顯示。如果是close，則會將window銷毀。
});
Ext.get("window").on("click",function() {
window.show();
});
效果：
