Setup Aptana Studio/Eclipse for Ext JS Development:

In this chapter, we are going to setup Aptana IDE for Ext JS 6 development. You can follow the same thing to setup Eclipse IDE also.

Aptana is a powerful open-source web development IDE. Please download and install Aptana Studio 3.

Now, you need to install Spket IDE plugin from spket.com. Spket is a powerful toolkit for JavaScript and XML development. It enables autocomplete feature for Ext JS as soon as you install and configure Spket IDE plugin in Aptana or Eclipse.

Install Spket plugin in Aptana or Eclipse:

  1. Open Aptana/Eclipse.
  2. Go to Help menu -> 'Install New Software..'
  3. It will open a popup window as shown below:

    Install spket plugin in aptana
  4. Click 'Add' and enter name 'Spket' and Location ‘http://www.agpad.com/update/’.

    app repository in aptana
  5. Click OK.
  6. Select all the packages under Spket IDE:

    select spket IDE package
  7. Click 'Next'.
  8. Accept the License Agreement.
  9. Click 'Finish'.

    Start installation
  10. This will download and install Spket IDE plugin in Aptana/Eclipse.
  11. After installation -> restart Aptana/Eclipse.

Now, you need to configure Spket plugin. Follow the below steps to configure Spket plugin in Aptana/Eclipse in windows platform:

  1. Start Aptana or Eclipse.
  2. Go to Windows menu -> Preferences.
  3. Expand Spket -> select JavaScript Profiles.

    set spket javascript profile
  4. Click 'New..'
  5. Enter Name as ExtJS and click OK.

    set profile name
  6. Now, select ExtJS profile and click 'Add Library'. This opens 'Select Library' popup.
  7. Select ExtJS from the drowpdown and click 'OK'.

    select EXTJS library
  8. Now, select ExtJS profile and click 'Add Library'.
    select EXTJS library
  9. In the Select Library popup, select ExtJS and click OK.
    select EXTJS library
  10. Now, select ExtJS child node and click Add Folder and select build folder under Ext JS 6 sdk folder which you downloaded earlier.

    select jcb2 file
  11. This will add all JS files under build folder.
    select jcb2 file
  12. Now, set ExtJS profile as Default profile by clicking on Default button.
  13. Click OK and restart Aptana or Eclipse.

Now, create new project and JavaScript file and press Ctrl + Space. This shows autocomplete feature with help as shown below:

autocomplete for extjs4 classes in aptana

This is how you can get autocomplete feature in Aptana or Eclipse.

JavaScript Syntax errors and warnings:

Aptana or Eclipse comes with JSLint and JavaScript Syntax validators. However, JSLint validator is disabled by default. To enable it,

  1. Go to Windows -> Preferences.
  2. Expand Aptana Studio node.
  3. Select Validation. There you will see JSLint Validator:

    enable JSLint validator in aptana
  4. Select JSLint validator and click OK.

Now the Problems window displays JavaScript errors and warnings for your project. However, you need to exclude extjs sdk folder because JSLint shows errors and warnings for many sdk JS files.

To exclude it, right click on sdk folder in Project explorer -> select Properties -> select Resource Filters under Resource node and click 'Add':

setup apatana

Select Exclude All, Files and Folders, All Children and enter * in File and Folder Attributes as shown below:

setup aptana

Now, you get errors and warnings for your JavaScript files only.

Format JavaScript code:

Aptana comes with default code formatter for JavaScript. Press Ctrl + Shift + F to format JavaScript code in Aptana.


So, in this way you can setup development environment using Aptana or Eclipse IDE in Windows platform.