改写自下载包里自带的例子.
jsp:
@ page language="java" contentType="text/html; charset=UTF-8"%>]]>
jsp:include page="/jsp/globalConfig.jsp">span style="color: rgb(128, 0, 0);">jsp:include>
html>
head>
title>MessageBox Samplesspan style="color: rgb(128, 0, 0);">title>
script type="text/javascript" src="js/mbsample.js">span style="color: rgb(128, 0, 0);">script>
style type="text/css">
.x-window-dlg .ext-mb-download {
background:transparent url(images/download.gif) no-repeat top left;
height:46px;
}
span style="color: rgb(128, 0, 0);">style>
span style="color: rgb(128, 0, 0);">head>
body>
h1>MessageBox 对话框span style="color: rgb(128, 0, 0);">h1>
p>The example shows how to use the MessageBox class. Some of the buttons have animations, some are normal.span style="color: rgb(128, 0, 0);">p>
p>The js is not minified so it is readable. See a href="js/mbsample.js">Message-sample..jsspan style="color: rgb(128, 0, 0);">a>.span style="color: rgb(128, 0, 0);">p>
p>
b>Confirmspan style="color: rgb(128, 0, 0);">b><</span>br />
Standard Yes/No dialog.
button id="mb1">Showspan style="color: rgb(128, 0, 0);">button>
span style="color: rgb(128, 0, 0);">p>
p>
b>Promptspan style="color: rgb(128, 0, 0);">b><</span>br />
Standard prompt dialog.
button id="mb2">Showspan style="color: rgb(128, 0, 0);">button>
span style="color: rgb(128, 0, 0);">p>
p>
b>Multi-line Promptspan style="color: rgb(128, 0, 0);">b><</span>br />
A multi-line prompt dialog.
button id="mb3">Showspan style="color: rgb(128, 0, 0);">button>
span style="color: rgb(128, 0, 0);">p>
p>
b>Yes/No/Cancelspan style="color: rgb(128, 0, 0);">b><</span>br />
Standard Yes/No/Cancel dialog.
button id="mb4">Showspan style="color: rgb(128, 0, 0);">button>
span style="color: rgb(128, 0, 0);">p>
p>
b>Progress Dialogspan style="color: rgb(128, 0, 0);">b><</span>br />
Dialog with measured progress bar.
button id="mb6">Showspan style="color: rgb(128, 0, 0);">button>
span style="color: rgb(128, 0, 0);">p>
p>
b>Wait Dialogspan style="color: rgb(128, 0, 0);">b><</span>br />
Dialog with indefinite progress bar and custom icon (will close after 8 sec).
button id="mb7">Showspan style="color: rgb(128, 0, 0);">button>
span style="color: rgb(128, 0, 0);">p>
p>
b>Alertspan style="color: rgb(128, 0, 0);">b><</span>br />
Standard alert message dialog.
button id="mb8">Showspan style="color: rgb(128, 0, 0);">button>
span style="color: rgb(128, 0, 0);">p>
p>
b>Iconsspan style="color: rgb(128, 0, 0);">b><</span>br />
Standard alert with optional icon.
select id="icons">
option id="error" selected="selected">Errorspan style="color: rgb(128, 0, 0);">option>
option id="info">Informationalspan style="color: rgb(128, 0, 0);">option>
option id="question">Questionspan style="color: rgb(128, 0, 0);">option>
option id="warning">Warningspan style="color: rgb(128, 0, 0);">option>
span style="color: rgb(128, 0, 0);">select>
button id="mb9">Showspan style="color: rgb(128, 0, 0);">button>
span style="color: rgb(128, 0, 0);">p>
span style="color: rgb(128, 0, 0);">body>
span style="color: rgb(128, 0, 0);">html>
mbsample.js:
/*
* Ext JS Library 2.2.1
* Copyright(c) 2006-2009, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
Ext.get('mb1').on('click', function(e){
Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);
});
Ext.get('mb2').on('click', function(e){
Ext.MessageBox.prompt('Name', 'Please enter your name:', showResultText);
});
Ext.get('mb3').on('click', function(e){
Ext.MessageBox.show({
title: 'Address',
msg: 'Please enter your address:',
width:300,
buttons: Ext.MessageBox.OKCANCEL,
multiline: true,
fn: showResultText,
animEl: 'mb3'
});
});
Ext.get('mb4').on('click', function(e){
Ext.MessageBox.show({
title:'Save Changes?',
msg: 'You are closing a tab that has unsaved changes. br />Would you like to save your changes?',
buttons: Ext.MessageBox.YESNOCANCEL,
fn: showResult,
animEl: 'mb4',
icon: Ext.MessageBox.QUESTION
});
});
Ext.get('mb6').on('click', function(){
Ext.MessageBox.show({
title: 'Please wait',
msg: 'Loading items
',
progressText: 'Initializing',
width:300,
progress:true,
closable:false,
animEl: 'mb6'
});
// this hideous block creates the bogus progress
var f = function(v){
return function(){
if(v == 12){
Ext.MessageBox.hide();
Ext.example.msg('Done', 'Your fake items were loaded!');
}else{
var i = v/11;
Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed');
}
};
};
for(var i = 1; i 13; i++){
setTimeout(f(i), i*500);
}
});
Ext.get('mb7').on('click', function(){
Ext.MessageBox.show({
msg: 'Saving your data, please wait',
progressText: 'Saving',
width:300,
wait:true,
waitConfig: {interval:200},
icon:'ext-mb-download', //custom class in msg-box.html
animEl: 'mb7'
});
setTimeout(function(){
//This simulates a long-running operation like a database save or XHR call.
//In real code, this would be in a callback function.
Ext.MessageBox.hide();
//Ext.example.msg('Done', 'Your fake data was saved!');
}, 8000);
});
Ext.get('mb8').on('click', function(){
Ext.MessageBox.alert('Status', 'Changes saved successfully.', showResult);
});
//Add these values dynamically so they aren't hard-coded in the html
Ext.fly('info').dom.value = Ext.MessageBox.INFO;
Ext.fly('question').dom.value = Ext.MessageBox.QUESTION;
Ext.fly('warning').dom.value = Ext.MessageBox.WARNING;
Ext.fly('error').dom.value = Ext.MessageBox.ERROR;
Ext.get('mb9').on('click', function(){
Ext.MessageBox.show({
title: 'Icon Support',
msg: 'Here is a message with an icon!',
buttons: Ext.MessageBox.OK,
animEl: 'mb9',
fn: showResult,
icon: Ext.get('icons').dom.value
});
});
function showResult(btn){
//Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
};
function showResultText(btn, text){
//Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
};
});