ExtJS 4.2 系列教程（1）：Hello ExtJS4

时间 2019-11-24

标签 extjs 4.2 系列教程 hello extjs4 繁體版

原文原文链接

一、下载ExtJS
javascript

http://www.sencha.com/css

我下载的版本是 ext-4.2.1.883html

二、使用Eclipse建立Dynamic Web Project ，不懂的自行google（今天下午完全挂了）or 百度java

三、引入ExtJS库
bootstrap

复制ext目录下的resources文件夹到WebRoot的static路径下，里面包含ext提供的主题和css文件服务器
复制bootstrap.js、ext-all.js、ext-all-debug.js三个文件
jsp
复制locale中ext-lang-zh_CN.js中文语言包（可选）测试

四、新建index.jsp文件google

在head引入上述Extjs库
debug

<link rel="stylesheet" type="text/css" href="static/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="static/ext/bootstrap.js"></script>
<script type="text/javascript" src="static/ext/locale/ext-lang-zh_CN.js"></script>

五、修改bootstrap.js文件

找到

  document.write('<script type="text/javascript" charset="UTF-8" src="' + 
        path + 'ext-all' + (isDevelopment ? '-dev' : '') + '.js"></script>');

修改成：

  document.write('<script type="text/javascript" charset="UTF-8" src="' + 
        path + 'ext-all' + (isDevelopment ? '-debug' : '') + '.js"></script>');

六、在index.jsp的body中编写测试用例

<script type="text/javascript">
	Ext.onReady(function(){
		Ext.MessageBox.alert("hello","Hello,ExtJS4");
	});
</script>

七、部署到Tomcat服务器，运行 http://localhost:8123/ext/index.jsp