ExtJs教程第一集 搭建ext环境后的第一个hello World
下载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>
