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" />
这两种都是可以的。