ext4.2入门简单小例子（button的事件--对话框的几种使用情况）
ExtJS的官网地址：http://www.sencha.com/products/extjs
在这个网址上面，我们可以下载到ExtJS的最新版本。目前，ExtJS的最新版是4.2.1，我们将使用这个版本进行讲解。ExtJS 4.x 做了很大的改变，对3.x是不兼容的。
在页面中，我们可以找到下载按钮，下载最新这个版本的ExtJS。下载完成以后对它进行解压，接下来我们将完成简单的小程序示例。
这是包的重要目录：
下面是主页面了：
<%@ 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>Insert title here</title>
<link href="Extjs/ext4.2/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script type="text/javascript" src="Extjs/ext4.2/bootstrap.js"></script>
<script type="text/javascript">
/* function init() {
Ext.get("btn1").on("click", function () {
Ext.MessageBox.alert("提示", "按钮被点击");
});
Ext.get("btn2").on("click", function () {
Ext.MessageBox.confirm("提示", "是否要跳转页面？", function (btnId) {
if (btnId == "yes") {
alert("点击了yes按钮");
}
else if (btnId == "no") {
alert("点击了no按钮");
}
else {
alert("没有点击按钮，关闭了提示框");
}
});
});
}
Ext.onReady(init); */
Ext.onReady(function () {
Ext.get("btn1").on("click", function () {
Ext.MessageBox.alert("提示", "按钮被点击");
});
Ext.get("btn2").on("click", function () {
Ext.MessageBox.confirm("提示", "是否要跳转页面？", function (btnId) {
if (btnId == "yes") {
alert("点击了yes按钮");
}
else if (btnId == "no") {
alert("点击了no按钮");
}
else {
alert("没有点击按钮，关闭了提示框");
}
});
});
Ext.get("btn3").on("click", function () {
/* //Ext.MessageBox.alert("提示", "Hello world");
Ext.MessageBox.prompt("提示", "请输入用户名", function (btnId, text) {
if (btnId == "ok") {
alert(text);
}
else {
alert("点击了取消按钮");
}
}); */
Ext.MessageBox.prompt("提示", "请输入用户名", function (btnId, text) {
if (btnId == "ok") {
alert(text);
}
else {
alert("点击了取消按钮");
}
}, window, true, "这是默认文字");
});
});
</script>
</head>
<body>
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
</body>
</html>
其实就是这么简单啦，主要是环境弄好了之后好做了，以后就可以按照api一步一步来做了。
这个里面最重要的一点就是js和css的引入问题：
1： <link href="../resources/css/ext-all-neptune.css" rel="stylesheet" />
<script type="text/javascript" src="../bootstrap.js"></script>
2：<script src="../ext-all.js"></script>
<script src="../locale/ext-lang-zh_CN.js"></script>
<link href="../resources/css/ext-all.css" rel="stylesheet" />
这两种都是可以的。