extjs开发环境设置及实践收藏

1、下载并解压缩extjs

2、下载eclipse及Eclipse AJAX Toolkit Framework(ATF)

本人一直习惯使用eclipse作为开发环境，各种开源的plugin使eclipse有全能的表现，运行效率也较其它IDE高。

 ATF包括一个Mozilla浏览器，在eclipse中切换到"Mozilla视图"后,开发人员能进行html、dom、css的调试。但是如果要单步调试javascript，必须安装dojo或其它几个ajax开发框架，否则不能进行javascript调试。不明白javascript调试功能为何非要和dojo捆绑在一起，本人没用过dojo，不能在eclipse里调试javascript，这一点有些不爽。

ATF的安装稍微有些复杂，有一些Prerequisites要求先安装，幸好安装步骤在Eclipse网站上有说明，使用Eclipse的'Software Updates'来安装，有一步骤是配置JSLint

3、下载并安装JSEclipse

JSEclipse是一个eclipse plugin，作为javascript编辑器，使代码有颜色区分、代码格式化和辅助编码功能

4、下载并安装firefox和firebug

由于eclipse中没有装dojo不能进行javascript调试，所以本人下载并安装firefox和firebug。firebug是firefox的plugin，功能类似ATF，能够进行javascript、html、dom、css调试，而且firebug中用鼠标捕获html元素比ATF的方便，ATF中捕获html元素对含有extjs的Layout界面的支持不太好。

ATF和firebug可以互为补充使用，个人觉得比dreamweaver和ms的东东好，小巧灵活性能好，不要钱，获取方便，嘿嘿！

5、从extjs论坛上下载并安装JSEclipse plugin Ext of the code completion  library:

      http://extjs.com/forum/showthread.php?t=6112

     这个东东可完善JSEclipse对extjs的代码自动完成功能，见论坛中的说明

6、Ext Debug Console

      只要页面中包含ext-all-debug.js，按control+shift+home，会出现一个界面，可看到html结构，进行html和css调试，也是一个好东东！

7、在开发测试阶段，不要使用ext-all.js，因为该文件是压缩的js文件，不方便阅读调试，以ext-all-debug.js代替，在生产环境中再使用ext-all.js

 这些天看了aptana,感觉比jseclipse好用多了,不过机器的内存好大一点,具体装配置见:

http://extjs.com/blog/2007/06/29/building-a-desktop-application-with-ext-air-aptana-and-red-bull/

由于extjs的api doc不完整,有经验的extjs使用者可以通过阅读extjs的源码,以得到未在文档中公开的widgets、function、变量，可以得到事半功倍的效果！这一点对使用extjs进行开发非常有帮助，一般主要参考source/widgets目录下的源码。另外,使用firebug进行单步调试时,可以在向watch面板添加变量,通过展开层次视图,就可以了解到可以访问的属性和方法。

按装aptana和adobe AIR后的代码辅助功能（eclipse中创建AIR工程）：

 

 

ATF中调试css:

 

 Firebug中调试javascript:




Spket IDE是目前支持Ext 2.0最为出色的IDE。 它采用.jsb project file 文件并将继承于基类和所有文档的内容嵌入到生成代码提示的Script doc中。
由于Spket只是一个单纯的编辑器，没有其它格式的支持（如CSS），所以我的做法是用它的Eclipse插件形式，

启动ECLIPSE Help → Software Updates → Find and Install… → Search for new features to install → New remote site…

名称: “Spket”，地址URL是http://www.spket.com/update/

完成后重启（自动会加载插件，也可CMD ECLIPSE目录  使用命令 eclipse -clean  重新编译）

Window → Preferences → Spket → JavaScript Profiles → New ；
输入“ExtJS”点击OK；
选择“ExtJS” 并点击“Add Library”然后在下拉条中选取“ExtJS”；
选择 “ExtJS”并点击“Add File”，然后在你的./ext-2.x/source目录中选取“ext.jsb” 文件；

选择你想加载的插件
设置新的ExtJS Profile，选中并点击“JavaScript Profiles” 对话框右手边的“Defalut”按钮；

JS打开方式为 Window → Preferences → General→ Editors→ File...

选择JS 或者新创建 设置默认打开方式 为 Spket JavaScript Editor(default)

 

OK本人已经成功使用MYECLIPSE6。1，打开你的JS吧。尽情的Ext点点点点吧！！属性支持类似JAVA类，声明后才可以获得属性，Spket 还封装了JS常用函数。EXT编写环境已经捆饶以久，可是说Spket+EXT是最完美的编写EXT环境。

注：也适用过com.interaktonline.jseclipse插件，感觉功能不多（部分没有更新），EXT本身也不支持。。加载的是XML格式文件，所以推荐使用EXT本身支持的ext.jsb