Sencha Touch 2.2.1 code completion and outline in Eclipse (Updated Version)

You are developing with Sencha Touch and Eclipse? You want to have code completion and outline? ... Here I'll show you how to do it at no charge to you.

This tutorial works also for ExtJS developer, at least I tested it with ExtJS 4.x before. But actually I don't know if the required *.jsb3 file is still included their archives. May someone can confirm this?

Requirements:

• Working installation of Eclipse with Aptana Studio Plug-in (tested with Eclipse Juno Service Release 2 and Aptana Studio 3.4.0)
• Unzipped Sencha Touch 2.x.x (tested with Sencha Touch 2.2.1)
• *.jsb3 file *

* Since .jsb3 file is no more included in the Sencha Touch 2.2.1 archive (I guess they wanna sell you the Sencha Architect instead), you can download it here directly:

Download Sencha Touch .jsb3

For the case you are new to Aptana, I can suggest you to watch the following video tutorial first.

In the next steps I will show you how to install and configure your Spket IDE:

1. Download and copy the *.jsb3 file into the root directory of your extracted Sencha Touch archive (as a sibling of src)
2. Start Eclipse.
3. Goto Help > Install New Software
4. Click the "add" button
1. Name: Spket IDE
2. Location: http://www.agpad.com/update/
5. Select the Spket IDE Node and click the "Next" button (See Image1). Follow the installation steps.
6. Restart Eclipse.
7. In Eclipse, Windows > Preferences or just press ⌘ + ,
8. Select "Spket" > "JavaScript Profile preference" page to display the installed JavaScript Profiles.
9. Click the "New.." button. In the Name field, type "Sencha Touch" as the name for the new profile. Click "OK".
10. Click the "Add Library" button. From the Library drop-down list, select "ExtJS". Click "OK".
11. Click the "Add File" button, choose the *.jsb3 file, which you copied to the Sencha Touch root folder before (See step 1).
12. Check all the available select boxes in the created profile.
13. Select the Ext profile created in step 9, click the "Default" button. This makes it to the default profile for all your project.
14. Click "OK" to save the preferences.
15. Open your javascript file with the Spket JavaScript Editor. You can set Spket JavaScript Editor as the default editor. "Windows" > "Preferences" or just press ⌘ + ,"General" > "Editors" > "File Associations". Select the filetype "*.js". In associated editors select the Spket JavaScript Editor and press the "Default" button. See Image2.
16. When you type "Ext.de" and press STRTG + SPACE your code should get completed.
17. Done.