-
下载js文件，
官方地址
，
ExtJS v3.2.0
或者ExtJS v3.4.0都行
-
解压Extjs包，把以下文件夹和js文件拿出来
-
adapter（文件夹）
resources（文件夹）
ext-all.js
ext-all-debug.js
-
目录结构如下
5.
开始写html代码
版本1
-
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>测试ExtJS部署</title>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
<link rel=”stylesheet” type=”text/css” href=”extjs/resources/css/ext-all.css” />
<script type=”text/javascript” src=”extjs/adapter/ext/ext-base.js”></script>
<script type=”text/javascript” src=”extjs/ext-all-debug.js”></script>
<script type=”text/javascript” src=”extjs/ext-lang-zh_CN.js”></script>
<script type=”text/javascript”>
Ext.onReady(function() {
Ext.MessageBox.alert(‘提示’, ‘执行方法 Ext.onReady()’);
});
</script>
</head><body></body>
</html> -
在谷歌浏览器运行之即可。
版本2
jsp页面如下
-
<%@ 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 rel=”stylesheet” type=”text/css” href=”extjs/resources/css/ext-all.css” />
<script type=”text/javascript” src=”extjs/adapter/ext/ext-base.js”></script>
<script type=”text/javascript” src=”extjs/ext-all-debug.js”></script>
<script type=”text/javascript” src=”extjs/ext-lang-zh_CN.js”></script></head>
<body>
<script type=”text/javascript”>
Ext.onReady(function() {
Ext.MessageBox.alert(‘提示’, ‘hello world！boy’);
});
</script>
</body>
</html>
版本3
目录结构如下
extjs文件夹里面的文件如下
hello.html 代码如下
-
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” ”
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd
“>
<html xmlns=”
http://www.w3.org/1999/xhtml
“>
<head runat=”server”>
<link rel=”stylesheet” type=”text/css” href=”extjs/resources/css/ext-all.css” />
<script src=”extjs/ext-base.js” type=”text/javascript”></script>
<script src=”extjs/ext-all.js” type=”text/javascript”></script>
<script src=”extjs/ext-lang-zh_CN.js” type=”text/javascript”></script>
<boyd>
<script type=”text/javascript”>
Ext.onReady(function() {
Ext.MessageBox.alert(‘提示’, ‘执行方法 Ext.onReady()’);
});
</script>
</body>
</html>
总结：导入的js文件夹只需要两个，
adapter（文件夹）resources（文件夹）
引入的css文件一个
<link rel=”stylesheet” type=”text/css” href=”extjs/resources/css/ext-all.css” />
引入的js文件可以有多种组合，目前我尝试出来的可以是
-
ext-base.js + ext-all-debug.js
-
ext-base.js + ext-all.js
如下
-
<script type=”text/javascript” src=”extjs/adapter/ext/ext-base.js”></script>
<script type=”text/javascript” src=”extjs/ext-all-debug.js”></script>
<script type=”text/javascript” src=”extjs/ext-lang-zh_CN.js”></script> -
<script src=”extjs/ext-base.js” type=”text/javascript”></script>
<script src=”extjs/ext-all.js” type=”text/javascript”></script>
<script src=”extjs/ext-lang-zh_CN.js” type=”text/javascript”></script>
转载于:https://www.cnblogs.com/ae6623/archive/2012/07/12/4416717.html