围绕Ext JS 2.0的IDE、插件和工具 by Jack Slocum

   Ext 2.0的API包含许多的方法（函数）、属性和配置项，涵盖的面非常大，要全部列出几乎是不可能的。虽然API文档是童叟无欺精心打造的，但实际开发中，若果能够像其它语言Java和C#那样地支持JavaScript代码提示，那就更好啦。可喜的是，有若干的开发环境（IDE）和插件能够支持－－并且是直接支持Ext 2.0。

    Aptana Studio
    一谈到JavaScript的开发工具，就不得不提Aptana了。就我实际工作来说，每天都用它来完成Adobe AIR的工作。但是Aptana当前捆绑的Ext的版本有些旧（1.1的），下面就介绍一个插件的安装方法，让Aptana支持到2.0（由Markus Schmidleitner提供，用起来还不错）：

1.下载并安装Aptana Studio;
2.打开你的Aptana程序目录（我这儿是C:\Aptana），复制jar格式的文件到plugins目录；
3.重启Aptana；
4.进入Window -> Preferences -> Aptana -> Editors -> JavaScript -> Code Assist选择Ext 2.0（或要反选Ext.1.1）。

Aptana Studio with Ext 2.0 code assist

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

    1.下载安装Aptana Studio（包含有Eclipse）；
    2.启动Aptana并打开程序菜单到：Help → Software Updates → Find and Install… → Search for new features to install → New remote site…
    3.名称: “Spket”，地址URL是http://www.spket.com/update/
    4.重启Aptana；
    5.观看一下这个SketIDE的教程，看看Ext代码提示的功能有多省事（你可以修改/src/ext.jsb 保持最新版的Ext），基本步骤如下：

1. Window → Preferences → Spket → JavaScript Profiles → New ；
2. 输入“ExtJS”点击OK；
3. 选择“ExtJS” 并点击“Add Library”然后在下拉条中选取“ExtJS”；
4. 选择 “ExtJS”并点击“Add File”，然后在你的./ext-2.x/source目录中选取“ext.jsb” 文件；
5. 设置新的ExtJS Profile，选中并点击“JavaScript Profiles” 对话框右手边的“Defalut”按钮；
6. 重启Aptana；
7. 创建新的JS文件并输入： Ext这样就可设置Ext Code代码自动完成的功能。

    由于你是在Aptana中安装插件的，Aptana还是你默认的JS编辑器，所以要试用Spket，你要在那个文件上选中“Open with”－> Spket JavaScript Editor 。

Spket in Aptana with full documentation and code assist

Komodo Edit
    Komodo Edit为众多格式文件提供支持，包括Perl、PHP、Python、Ruby和Tcl。亦支持浏览器方面的代码包括有JavaScript、CSS、HTML和XML。Windows、Mac Os和Linux平台都可用。
    安装Ext支持下的Komodo：

    1.下载和安装Komodo Edit；
    2.下载API catalog；
    3.进入Edit -> Preferences -> Code Intelligence 并选择位于“API Catalog”下方的按钮“Add an API catalog” ；
    4.选择刚才下载的ExtJS API catKomodo Editalog CIX 。

Komodo with Ext JS code intelligence

Dreamweaver
    对于Dreamweaver的用户，有两种可用的插件SpketDW(Dreamweaver 2004或新版)和SpketDWCS(Dreamweaver CS3)。两者都是Spket团队开发的(刚才提及的)，因此也同样精确和出色。另外Dreamweaver插件的一大特点是很好地支持配置项的代码提示。

 

Members code assist

 

 

Config option code assist

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

   要下载和安装，请浏览他们的站点。

其它的IDE
    还有其它的IDE,像由社区发起的正在工作着的IntelliJ和Visual Studio 2008。

总结
    当工作中需要到Ext 2.0，的确有一些工具能辅助你提升工作效率，这真的要比较一番（Check them out、check out、checkout...）。如果你也发现有其它更好的工具，不妨雁过留声，与我们分享。

评论

43 楼 sunjohn 2008-11-02  

那是因为你用 JavaScript editor 编辑 JSP 文件, Spket 没有 JSP Editor

42 楼 gang0713 2008-11-02  

我用Apptana和spket javascrip edit在eclipse下，可是打的文件总是有错误，是什么原因啊，哪位帮帮我啊啊

41 楼 sunjohn 2008-10-22  

hanksen918 写道

wwwcom 写道

我先说明一下我的环境:
JDK 1.6
Eclipse Ganymede.
spket-1.6.15.1
ext-2.2

我的操作是这样的:
1.解压spket-1.6.15.1.zip.将fearture和plugin目录下的文件分别复制粘帖到Eclipse对应的目录下.
2.重启Eclipse.此时Windows-prefrences中已经能看见spket了.
3.在spket-JavaScript Profiles中new一个ExtJs.
4.点击新创建的ExtJs-Add Library.选择ExtJs
5.点击新创建的Library(ExtJs).选择Add File.选择%Ext-2.2_HOME%/source/ext.jsb
6.打勾.全部勾上.然后将ExtJs设置为默认.
7.重启Eclipse...
这是.新建javascript.用Ext.语法帮助出不来??是哪里错了?

我的也是
希望楼主解惑！

有可能你有多个 javascript editor, 选择 javascript 文件，点鼠标右键，在弹出菜单，选 "Open With"，然后选择 "Spket JavaScript Editor"

40 楼 hanksen918 2008-10-22  

wwwcom 写道

我先说明一下我的环境:
JDK 1.6
Eclipse Ganymede.
spket-1.6.15.1
ext-2.2

我的操作是这样的:
1.解压spket-1.6.15.1.zip.将fearture和plugin目录下的文件分别复制粘帖到Eclipse对应的目录下.
2.重启Eclipse.此时Windows-prefrences中已经能看见spket了.
3.在spket-JavaScript Profiles中new一个ExtJs.
4.点击新创建的ExtJs-Add Library.选择ExtJs
5.点击新创建的Library(ExtJs).选择Add File.选择%Ext-2.2_HOME%/source/ext.jsb
6.打勾.全部勾上.然后将ExtJs设置为默认.
7.重启Eclipse...
这是.新建javascript.用Ext.语法帮助出不来??是哪里错了?

我的也是
希望楼主解惑！

39 楼 yy_dan 2008-09-16  

支持你的做法

38 楼 wwwcom 2008-09-11  

我先说明一下我的环境:
JDK 1.6
Eclipse Ganymede.
spket-1.6.15.1
ext-2.2

我的操作是这样的:
1.解压spket-1.6.15.1.zip.将fearture和plugin目录下的文件分别复制粘帖到Eclipse对应的目录下.
2.重启Eclipse.此时Windows-prefrences中已经能看见spket了.
3.在spket-JavaScript Profiles中new一个ExtJs.
4.点击新创建的ExtJs-Add Library.选择ExtJs
5.点击新创建的Library(ExtJs).选择Add File.选择%Ext-2.2_HOME%/source/ext.jsb
6.打勾.全部勾上.然后将ExtJs设置为默认.
7.重启Eclipse...
这是.新建javascript.用Ext.语法帮助出不来??是哪里错了?

37 楼 lu_pp 2008-07-17  

不用啊，可以用的啊

36 楼 cysunc 2008-07-16  

我安装了以后，无法用啊！是不是需要一个免费的license。可以官方网站对中国屏蔽了。

35 楼 sunjohn 2008-07-04  

liqinlulu 写道

我也装了spket,但是在
选择 “ExtJS”并点击“Add File”，然后在你的./ext-2.x/source目录中选取“ext.jsb” 文件 ,这一步时,怎么也找不到这个目录,这是为什么啊

下载 ExtJS 解压缩后，搜索下 ext.jsb 文件

34 楼 liqinlulu 2008-07-03  

我也装了spket,但是在
选择 “ExtJS”并点击“Add File”，然后在你的./ext-2.x/source目录中选取“ext.jsb” 文件 ,这一步时,怎么也找不到这个目录,这是为什么啊

33 楼 lixiaoxu85 2008-07-02  

一直在用SKEPT 不错的EXT支持工具

32 楼 feiyu367 2008-06-28  

<div class='quote_title'>sp42 写道</div>
<div class='quote_div'>
<p>   Ext 2.0的API包含许多的方法（函数）、属性和配置项，涵盖的面非常大，要全部列出几乎是不可能的。虽然<a href='http://extjs.com/deploy/dev/docs/' target='_blank'>API文档</a>是童叟无欺精心打造的，但实际开发中，若果能够像其它语言Java和C#那样地支持JavaScript代码提示，那就更好啦。可喜的是，有若干的开发环境（IDE）和插件能够支持－－并且是直接支持Ext 2.0。<br/><br/>    <strong>Aptana Studio</strong><br/>    一谈到JavaScript的开发工具，就不得不提<a href='http://aptana.com/studio/' target='_blank'>Aptana</a>了。就我实际工作来说，每天都用它来完成Adobe AIR的工作。但是Aptana当前捆绑的Ext的版本有些旧（1.1的），下面就介绍一个<a href='http://orsox.mocis.at/download.php?view.1' target='_blank'>插件</a>的安装方法，让Aptana支持到2.0（由Markus Schmidleitner提供，用起来还不错）：</p>
<blockquote>1.下载并安装Aptana Studio;<br/>2.打开你的Aptana程序目录（我这儿是C:\Aptana），复制jar格式的文件到plugins目录；<br/>3.重启Aptana；<br/>4.进入Window -&gt; Preferences -&gt; Aptana -&gt; Editors -&gt; JavaScript -&gt; Code Assist选择Ext 2.0（或要反选Ext.1.1）。</blockquote>
<p><br/><img src='http://extjs.com/playpen/screenshots/codeassist/aptana.gif' border='0' alt=''/></p>
<p align='center'><span style='font-size: 10px;'>Aptana Studio with Ext 2.0 code assist</span></p>
<br/><strong>Spket Eclipse插件与IDE</strong><br/>    <a href='http://www.spket.com/' target='_blank'>Spket IDE</a>是目前支持Ext 2.0最为出色的IDE。 它采用.jsb project file 文件并将继承于基类和所有文档的内容嵌入到生成代码提示的Script doc中。<br/>    由于Spket只是一个单纯的编辑器，没有其它格式的支持（如CSS），所以我的做法是用它的Eclipse插件形式，安装到Aptana。安装办法如下：<br/>
<blockquote>    1.下载安装Aptana Studio（包含有Eclipse）；<br/>    2.启动Aptana并打开程序菜单到：Help → Software Updates → Find and Install… → Search for new features to install → New remote site… <br/>    3.名称: “Spket”，地址URL是<a href='http://www.spket.com/update/' target='_blank'>http://www.spket.com/update/</a> <br/>    4.重启Aptana；<br/>    5.观看一下这个SketIDE的<a href='http://www.spket.com/demos/js.html' target='_blank'>教程</a>，看看Ext代码提示的功能有多省事（你可以修改/src/ext.jsb 保持最新版的Ext），基本步骤如下：<br/><ol>
<li>Window → Preferences → Spket → JavaScript Profiles → New ；</li>
<li>输入“ExtJS”点击OK； </li>
<li>选择“ExtJS” 并点击“Add Library”然后在下拉条中选取“ExtJS”； </li>
<li>选择 “ExtJS”并点击“Add File”，然后在你的./ext-2.x/source目录中选取“ext.jsb” 文件；</li>
<li>设置新的ExtJS Profile，选中并点击“JavaScript Profiles” 对话框右手边的“Defalut”按钮；</li>
<li>重启Aptana； </li>
<li>创建新的JS文件并输入： Ext这样就可设置Ext Code代码自动完成的功能。</li>
</ol></blockquote>
<br/>    由于你是在Aptana中安装插件的，Aptana还是你默认的JS编辑器，所以要试用Spket，你要在那个文件上选中“Open with”－&gt; Spket JavaScript Editor 。<br/><br/><img src='http://extjs.com/playpen/screenshots/codeassist/spket.gif' border='0' alt=''/>
<p align='center'><span style='font-size: 10px;'>Spket in Aptana with full documentation and code assist</span></p>
<p><br/><strong>Komodo Edit </strong><br/>    <a href='http://www.activestate.com/Products/komodo_edit/' target='_blank'>Komodo Edit</a>为众多格式文件提供支持，包括Perl、PHP、Python、Ruby和Tcl。亦支持浏览器方面的代码包括有JavaScript、CSS、HTML和XML。Windows、Mac Os和Linux平台都可用。<br/>    安装Ext支持下的Komodo：</p>
<blockquote>    1.下载和安装Komodo Edit；<br/>    2.下载<a href='http://community.activestate.com/komodo-extension/extjs-api-catalog-collection' target='_blank'>API catalog</a>；<br/>    3.进入Edit -&gt; Preferences -&gt; Code Intelligence 并选择位于“API Catalog”下方的按钮“Add an API catalog” ；<br/>    4.选择刚才下载的ExtJS API cat<a href='http://www.activestate.com/Products/komodo_edit/' target='_blank'>Komodo Edit</a>alog CIX 。</blockquote>
<p><br/><img src='http://extjs.com/playpen/screenshots/codeassist/komodo.gif' border='0' alt=''/></p>
<p align='center'><span style='font-size: 10px;'>Komodo with Ext JS code intelligence</span></p>
<br/><strong>Dreamweaver</strong><br/>    对于Dreamweaver的用户，有两种可用的插件<a href='http://www.spket.com/dreamweaver-extension.html' target='_blank'>SpketDW</a>(Dreamweaver 2004或新版)和<a href='http://www.spket.com/dreamweaver-extension.html' target='_blank'>SpketDWCS</a>(Dreamweaver CS3)。两者都是Spket团队开发的(刚才提及的)，因此也同样精确和出色。另外Dreamweaver插件的一大特点是很好地支持配置项的代码提示。<br/>
<p align='left'> </p>
<br/><span style='float: left;'><span style=''><img src='http://extjs.com/playpen/screenshots/codeassist/dw-fns.gif' border='0' alt=''/></span>
<p align='center'><span style='font-size: 10px;'><span style=''>Members code assist</span></span></p>
<br/>
<p align='center'><span style='font-size: 10px;'><br/></span></p>
<br/></span><br/>
<p align='left'> </p>
<p align='left'> </p>
<br/><span style='float: left;'>
<p align='center'><span style=''><img src='http://extjs.com/playpen/screenshots/codeassist/dw-configs.gif' border='0' alt=''/></span></p>
<br/>
<p align='center'><span style='font-size: 10px;'><span style=''>Config option code assist</span></span></p>
<br/>
<p align='center'><span style='font-size: 10px;'><br/></span></p>
<br/></span><br/>
<p align='left'> </p>
<p align='left'><span style=''><span style=''><span style='font-family: Arial Unicode MS;'><br/></span></span></span></p>
<p align='left'> </p>
<p align='left'> </p>
<p align='left'> </p>
<p align='left'> </p>
<p align='left'> </p>
<p align='left'> </p>
<p align='left'> </p>
<p align='left'> </p>
<p align='left'> </p>
<p align='left'> </p>
<p align='left'> </p>
<br/>
<p align='left'> </p>
<p align='left'><span style=''><span style=''><span style='font-family: Arial Unicode MS;'><br/></span></span></span></p>
<p align='left'> </p>
<p align='left'> </p>
<p align='left'> </p>
<p align='left'>   要下载和安装，请浏览他们的<a href='http://www.spket.com/dreamweaver-extension.html' target='_blank'>站点</a>。<br/><br/><strong>其它的IDE</strong><br/>    还有其它的IDE,像由社区发起的正在工作着的IntelliJ和<a href='http://extjs.com/forum/showthread.php?t=18751' target='_blank'>Visual Studio 2008</a>。<br/><br/><strong>总结</strong><br/>    当工作中需要到Ext 2.0，的确有一些工具能辅助你提升工作效率，这真的要比较一番（Check them out、check out、checkout...）。如果你也发现有其它更好的工具，不妨雁过留声，与我们分享。</p>
</div>
<p> </p>

31 楼 fiftyk 2008-06-27  

不错 我也在用aptana  昨天又发现了Spket 惊喜

30 楼 plkong 2008-06-22  

谢谢，正打算学习Ext呢。

29 楼 fxbird 2008-06-15  

说起javascript的支持，谁都没有idea强，那些免费的插件和它一比，简直是小儿科

28 楼 spiritfrog 2008-06-04  

刚找了下，apatna也有独立eclipse插件，可以安装到已有的eclipse中，
http://www.aptana.com/docs/index.php/Plugging_Aptana_into_an_existing_Eclipse_configuration
这样就可以spket编辑js， apatna编辑html，同样支持code assist

27 楼 spiritfrog 2008-06-04  

有一个问题， 有没有单独的Aptana 插件， 现在不想换eclipse啊

26 楼 supernaturalmagician 2008-04-25  

Aptana 1.1 已经开始全面支持EXT2,选项里边已经没有EXT1了

25 楼 sp42 2008-04-24  

zwangz 写道

启动aptana后，javaw.exe占用内存很严重，动不动就吃掉400mb的内存。。。机器受不了啊。。。。。怎么办？

我也是类似的情形。
用ECLIPSE插件的形式就没有占内存的问题，--推荐这种方式啦

24 楼 不见得 2008-04-24  

zwangz 写道

启动aptana后，javaw.exe占用内存很严重，动不动就吃掉400mb的内存。。。机器受不了啊。。。。。怎么办？

没有啥办法哦！我的办法就是把其他的应用都关掉   ， 对了 aptana1.1 已经支持 ext2 了 ， 呵呵