`
sp42
  • 浏览: 147328 次
  • 来自: Canton
文章分类
社区版块
存档分类
最新评论

围绕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 了 , 呵呵

相关推荐

    Build Ajax Applications with Ext JS.pdf

    Ext JS最初是由Jack Slocum发起的一个项目,目的是为了扩展Yahoo! User Interface (YUI) Library的功能。随着版本2.0的发布,Ext JS已经成为市场上最简单且功能强大的JavaScript库之一。 ##### 关键特性: 1. **跨...

    EXT3.0 COOKBOOK中文版

    - **发展历程**:Ext JS最初由Jack Slocum开发,后被Sencha公司收购并继续发展。3.0版本发布于2009年,相较于2.x版本在性能、API设计等方面都有显著提升。 - **应用场景**:广泛应用于企业级应用开发、管理后台系统...

    Learning ExtJS, Fourth Edition (Ext JS 5+)

    2. 数据处理:Ext JS提供强大的数据管理工具,包括Store和Model,它们用于管理客户端数据并提供CRUD(创建、读取、更新、删除)操作。它们为复杂数据操作提供了方便的数据抽象层。 3. 主题和样式:Ext JS通过一套...

    网上搜集的ext相关教程

    EXT,全称EXT JS,是一种基于JavaScript的开源用户界面库,专门用于构建富客户端Web应用程序。EXT最初由Jack Slocum开发,后来被Sencha公司收购并进一步发展。EXT库以其丰富的组件、强大的数据绑定机制和优雅的API...

    ext_js

    UI Library)的一个扩展版本出现的,由Jack Slocum创建,旨在为YUI添加更多的功能和改进。 - **演变**: 在经历了YUI-Ext 0.30和ExtJS 1.X等多个版本后,ExtJS 2.0的发布标志着该框架的重大进步。随着版本的迭代,...

    Ext Designer安装和汉化、教程

    Ext可视化http://www.screencast.com/users/JackSlocum 安装和汉化的步骤 第一步:Ext需要支持AIR的支持。下载并安装 http://airdownload.adobe.com/air/win/download/latest/AdobeAIRInstaller.exe 压缩包中已...

    ExtJS_Designer(安装程序与破解补丁)

    在圣诞节来临之前ExtJs的创始人JackSlocum给了我们一个圣诞大礼,演示了ExtJs3.0的可视化开发工具. Ext JS Road Map Ext JS 3.0 (Early 2009) * All new lightweight, high-speed core base library * Flash ...

    EXT资料大全,ext,api

    EXT最初由Jack Slocum创建,后来发展成为Sencha公司的核心产品之一。EXT的主要特点在于它提供了强大的组件模型,允许开发者构建复杂的用户界面,同时提供了丰富的数据绑定和数据管理功能。 标题中的"EXT资料大全...

    ext js教程PPT

    在实际应用中,你需要在HTML文件中引入相关的CSS和JavaScript库,如resources/css/ext-all.css、adapter/ext/ext-base.js以及ext-all.js。 接下来,我们来谈谈ExtJS的组件体系。ExtJS的核心在于其组件化的设计,这...

    EXTJS2.0.rar_extjs2.0

    ExtJs最开始基于YUI技术,由开发人员JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。

    ext4.2.1.883

    ExtJs最开始基于YUI技术,由开发人员JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。...

    extJS-3.0完整包

    ExtJs最开始基于YUI技术,由开发人员JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。...

    ExtJS2.0实用教程(CHM版)

    ExtJs最开始基于YUI技术,由开发人员Jack Slocum开发,通过参考Java Swing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。...

    EXT API简介,并附带学习案例(JAVA)

    EXT API 是一个强大的 JavaScript 库,主要用于构建富客户端的 AJAX 应用程序,由 Jack Slocum 创建。EXTJS 提供了一套完整的前端用户界面框架,可以与各种后端技术如 .NET、Java、PHP 等无缝集成。它扩展了 Yahoo!...

    EXT-js-中文手册

    EXT最初由Jack Slocum创建,并在之后的发展中逐渐成为了一款广泛使用的前端开发工具。 - **主要特性**:提供了丰富的组件库、灵活的布局管理系统以及强大的数据处理能力。这些特性使得开发者能够快速构建出高度交互...

Global site tag (gtag.js) - Google Analytics