ExtJS实战（1）——eclipse搭建ExtJS4开发环境以及第一个程序Helloword

互联网的时代，web开发永远是一个充满希望的的主题，最近有接触了一门新知识ExtJs了。废话少说，下面介绍本人在

eclipse上搭建ExtJS4.0.7开发环境的过程。希望能给大家带来一些方便，以便少走一些弯路，毕竟本人刚开始的时候也

花了不少时间去查阅资料学习如何搭建。

准备工作：

eclipse 版本：eclipse-jee-indigo-SR2-win32-x86_64

ext版本：ext-4.0.7-gpl

智能提示插件版本：spket-1.6.23.jar

安装过程：

（1）学到ext的，eclipse的安装就不多说了

（2）先安装智能提示插件

1）双击运行spket-1.6.23.jar，傻瓜式安装，安装过程选好eclipse的安装目录

（如D:\Program Files (x86)\eclipse）和spket的安装目录（ 如D:\ProgramFiles (x86)\spket）即可

2）安装完spket后，重启eclipse，会看到Window→ Proferences里会多一个Spket的选项

3）选择JavaScript Profiles,点击new→ 新建立Ext→ 点击Add Library→ 选择ExtJS，建立新的 Library，点 击Add File，→ 选择extjs4.0.7包里build文件夹里带的sdk.jsb3，最后还可以点击Default让其成为缺省的
JavaScript Pro File.如下图：



4）设置js的默认编辑器



至此，spket插件安装完成，下面介绍第一个程序——Helloword

（1）新建一个Dynamic Web project，为了防止引入ext-4.0.7-gpl时出现错误，项目右击——点击Properties——弹出对话框点击Builders——去掉javascript validator上的勾即可，如下图：



（2）接下来将ext-4.0.7-gpl整个文件拷到项目的WebContent目录下,这时候为了减少项目文件的大小还可以将一些不影响项目开发的extjs多余的文件去掉，比如例子（examples）、文档（doc）等统统移除，留着语言包（locale）、css样式包（resources）、src及extjs的核心文件ext-all.js等，如下图



（3）接下来建立自己的javascript文件夹和页面文件夹，如下图：



(4)，双击打开helloword.js编写ExtJS文件，如图（因为之前我们安装了spket，所以当输入Ext.的时候就会出现提示，这能大大提高我们的开发效率）



（5）编写html文件



（6）项目测试，在浏览器输入http://localhost:8080/ExtJS4/pages/Helloword.html，结果如下



运行成功了，虽然没有阴影，但不影响我们的测试。

至此，在eclipse上搭建Extjs开发环境和编写第一个Helloword程序的工作已经完成。