IDEs, plugins and tools for Ext JS 2.0

IDEs, plugins and tools for Ext JS 2.0
February 1, 2008 by Jack Slocum

---

The Ext 2.0 API is very extensive and remembering all of the functions, properties or configs available is virtually impossible. The API documentation is very thorough, but it would be nice if IDEs would provide code assist options in JavaScript as they do in other languages such as Java and C#. Luckily, there are some IDEs and plugins available that do just that — and also have direct support for Ext 2.0.

Aptana Studio
When it comes to IDEs for JavaScript development, Aptana is definitely hard to miss. I personally use it daily for Adobe AIR development. However, the version of Ext (1.1) bundled with Aptana for code assist is a little outdated.

Markus Schmidleitner has created an Ext 2.0 Aptana plugin that works very well. To install it:

• Download and install Aptana Studio.
• Open up your Aptana application directory (for me that is C:/Aptana) and copy the jar file into the plugins folder.
• Restart Aptana.
• Go to Window -> Preferences -> Aptana -> Editors -> JavaScript -> Code Assist and select Ext 2.0 (you may need to deselect Ext 1.1).

 

Aptana Studio with Ext 2.0 code assist

Spket Eclipse Plugin & IDE
The Spket IDE has by far the most superior code assist for Ext 2.0. It uses the Ext .jsb project file and embedded script doc to build code assist that includes options inherited from base classes and full documentation.

It doesn’t have much for editing other types of files though (e.g. CSS), so my preference is to install it as an Eclipse plugin in Aptana. To install the plugin in Aptana:

• Download and install Aptana Studio (includes Eclipse).
• Start Aptana and navigate the application menu to: Help → Software Updates → Find and Install… → Search for new features to install → New remote site…
• Name: “Spket”, Url: “http://www.spket.com/update/”
• Restart Aptana
• Watch this Spket IDE Tutorial to see how to easily add Ext code assist (you can point it at the latest /src/ext.jsb to keep code assist up to date with the latest Ext version). The steps are basically:
  • Window → Preferences → Spket → JavaScript Profiles → New
  • Enter “ExtJS” and click OK
  • Select “ExtJS” and click “Add Library”, then choose “ExtJS” from the dropdown
  • Select “ExtJS” and click “Add File”, then choose the “ext.jsb” file in your “./ext-2.x/source” directory
  • Set the new ExtJS profile as the default by selecting it an clicking the “Default” button on the right-hand side of the “JavaScript Profiles” dialog.
  • Restart Aptana
  • Create a new JS file and type: Ext. and you should get the Ext Code completion options.

Since you will have installed it as a plugin in Aptana, chances are Aptana will still be your default JS editor. So to try Spket, you need to right click on a file and select Open with -> Spket JavaScript Editor.

 

Spket in Aptana with full documentation and code assist

Komodo Edit
Komodo Edit has the strongest support for editing multiple types of files, including Perl, PHP, Python, Ruby and Tcl; plus support for browser-side code including JavaScript, CSS, HTML and XML. It’s also available on Windows, Mac OS X and Linux.

To install Komodo with Ext support:

• Download and install Komodo Edit.
• Download the API catalog.
• Go to Edit -> Preferences -> Code Intelligence and select the “Add an API catalog” button below the “API Catalog” section.
• Select the ExtJS API catalog CIX file you downloaded above.

 

Komodo with Ext JS code intelligence

Dreamweaver
For those using Dreamweaver, there are two plugins available SpketDW (Dreamweaver MX 2004 or higher) and SpketDWCS (Dreamweaver CS3). Both are made by the same team (Spket) as the Eclipse plugin above, so both are very accurate and thorough. One nice feature available in the Dreamweaver plugins is support for config option code assist.

 

Config option code assist

 

Members code assist

To download and install, please visit their site.

Other IDEs
There is support for other IDEs, such as IntelliJ and Visual Studio 2008 being actively worked on by the community.

Summary
When working with Ext 2.0, there are quite a few tools available to help boost your productivity. Be sure to check them out. If you know of any other tools we’ve missed, please post a comment and let us know!