日期:2014-05-16  浏览次数:20502 次

js开发-ext开发环境配置

转自:

http://www.blogjava.net/alexprefect/articles/269619.html

?

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

<script></script>

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