<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>auto layout布局</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/resources/ext-theme-neptune/ext-theme-neptune-all.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/ext-all.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.get("btn1").on("click", function() {
Ext.Msg.alert("tips", "clicked!");
});
// YES NO MessageBox
Ext.get("btn2").on("click", function() {
Ext.Msg.confirm('tips', 'to do it ?', function (btnId) {
if (btnId == 'yes') {
Ext.Msg.alert('tips', 'yes');
} else if (btnId == 'no') {
Ext.Msg.alert('tips', 'no');
} else {
alert('nothing to do, closed!');
}
});
});
// 单行输入框
Ext.get('btn3').on('click', function () {
Ext.Msg.prompt("tips", "input you name", function (btnId, text) {
if (btnId == 'ok') {
Ext.Msg.alert('tips', text);
} else {
Ext.Msg.alert('tips', 'cancled');
}
});
});
// 多行输入框
Ext.get('btn4').on('click', function () {
Ext.Msg.prompt("tips", "input you name", function (btnId, text) {
if (btnId == 'ok') {
Ext.Msg.alert('tips', text);
} else {
Ext.Msg.alert('tips', 'cancled');
}
}, window, true);
});
// 第五个参数显示默认文字， 第四个参数表明是多行还是单行
Ext.get('btn4').on('click', function () {
Ext.Msg.prompt("tips", "input you name", function (btnId, text) {
if (btnId == 'ok') {
Ext.Msg.alert('tips', text);
} else {
Ext.Msg.alert('tips', 'cancled');
}
}, window, false, 'default text');
});
// Show function
// buttons 的可选类别
// Ext.MessageBox.CANCLE Ext.MessageBox.ERROR Ext.MessageBox.INFO
// Ext.MessageBox.NO Ext.MessageBox.OK Ext.MessageBox.OKCANCEL
// Ext.MessageBox.QUCANCEL Ext.MessageBox.WARNING Ext.MessageBox.YES
// Ext.MessageBox.YESNOCANCEL
// icon 的可选类别
// Ext.MessageBox.INFO;Ext.MessageBox.WARNING;
// Ext.MessageBox.QUESTION; Ext.MessageBox.ERROR;
Ext.get('btn5').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: function (btnId) {
Ext.Msg.alert('tips', btnId);
},
animateTarget: 'mb4',
icon: Ext.MessageBox.QUESTION
});
});
// progress bar
Ext.get('btn6').on('click', function(){
Ext.MessageBox.show({
title: 'Please wait',
msg: 'Loading items...',
progressText: 'Initializing...',
width:300,
progress:true,
// closable:false,
animateTarget: 'btn6'
});
// this hideous block creates the bogus progress
var f = function(v){
return function(){
if(v == 12){
Ext.MessageBox.hide();
Ext.MessageBox.alert('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('btn7').on('click', function(){
Ext.MessageBox.show({
title: 'What, really?',
msg: 'Are you sure?',
buttons: Ext.MessageBox.YESNO,
buttonText:{
yes: "Definitely!",
no: "No chance!"
},
fn: function (btnId) {
Ext.Msg.alert("tips", btnId);
}
});
});
});
</script>
</head>
<body>
<button id="btn1">btn1</button><br />
<button id='btn2'>btn2</button> <br />
<button id='btn3'>btn3</button> <br />
<button id='btn4'>btn4</button> <br />
<button id='btn5'>btn5</button> <br />
<button id='btn6'>btn6</button> <br />
<button id='btn7'>btn7</button> <br />
</body>
</html>
