论坛首页 Web前端技术论坛

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

浏览 59181 次
该帖已经被评为良好帖
作者 正文
   发表时间:2008-02-02  

   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...)。如果你也发现有其它更好的工具,不妨雁过留声,与我们分享。

   发表时间:2008-02-02  
Spket 似乎没办法用utf-8啊 这样以前写的JS打开后很多乱码
1 请登录后投票
   发表时间:2008-02-03  
一直用Spket,js文件文本编码为GBK。
1 请登录后投票
   发表时间:2008-02-03  
我安装了“SpketDWCS”,代码提示很好,如果能像“Spry"集成的那样就更好了。可以拖拽组件的。
1 请登录后投票
   发表时间:2008-02-03  
非常的感谢,但是我的eclipse却装不了spket,笔记本没有问题.曾经想解决在aptana中显示的问题,但是一直没有解决,这次谢谢楼主了,我回去试试.
1 请登录后投票
   发表时间:2008-02-05  
beckrabbit 写道
Spket 似乎没办法用utf-8啊 这样以前写的JS打开后很多乱码

选择 project 或者 file, 点鼠标右键,选 properties 菜单,在弹出窗口,选 Resource, 设置 Text file encoding 为 UTF-8 就 ok 了。
1 请登录后投票
   发表时间:2008-02-19  
aptana 没有注册码
1 请登录后投票
   发表时间:2008-02-19  
aptana不是免费的吗?要注册码干嘛?
1 请登录后投票
   发表时间:2008-02-23  
自定义的类能自动完成吗?
1 请登录后投票
   发表时间:2008-02-23  
比较成熟的是parse你的API后,打包为一个插件。
自定义的类好像有时可以,成功率不高。
1 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics