Set Up Eclipse to Work with the Sencha Ext JS Web App Framework
This tutorial provides a brief overview of Sencha Ext JS as well as a simple breakdown of the steps for configuring Eclipse to work with the Free Sencha Ext JS Trial.
The History of Ext JS
In early 2006, Jack Slocum started working on a set of extension utilities for the Yahoo User Interface (YUI) library called "yui-ext." Eventually, Slocum created a plugin for any foundation library to provide utilities such as event handling, DOM manipulation and animated effects. This unanchored the library from YUI and led to version 1 of Ext JS. The current version is 6.x.
In June of 2010, Ext JS merged with JQTouch and Raphael, thus forming a new organization called Sencha Inc. Then, in August of 2017, Sencha was acquired by IDERA, owner of Embarcadero Technologies. Ext JS continues to be available on the Sencha website along with Sencha Touch, Sencha GXT, ExtReact, and Sencha Test.
Downloading Ext JS
Ext JS is a commercial product, so you have to buy it if you're planning on developing software that is intended for sale. That being said, you can still use the trial version of Ext JS for learning purposes or to build open source apps. The trial gives you access to Ext JS Premium edition, which includes Ext JS, D3, Adapter, Pivot Grid, Calendar, Exporter, Sencha Themer, Architect, Cmd, JetBrains, Visual Studio, and Eclipse IDE Plugins, Visual Studio Code Plugin, Stencils, and Inspector.
The trial version is available for the Sencha site. You must provide your email address and acknowledge the terms and condition to download it. A few minutes later, you should receive an email with a link to download Ext JS Premium edition.
Version 6 is a little under 200MB.
The Ext JS docs recommend that you extract the archived files to a fixed location in your "home" directory. For instance:
C:\Users\Me\sencha-sdks # Windows /Users/Me/sencha-sdks # Mac OS X /home/me/sencha-sdks # Linux
After unzipping Ext JS to your home folder, you should see the following directory structure (Windows pictured):
Install the Spket Plugin
Open the Eclipse IDE and then perform the following steps:
Select Help -> 'Install New Software…' from the main menu to open the Install dialog:
Click the 'Add' button and enter name 'Spket' and Location 'http://www.agpad.com/update/' in the Add Repository dialog:
- Click OK to close the dialog.
Click the checkbox at the top "Spket IDE" level to select all packages and click the 'Next' button:
- Accept the License Agreement and click on 'Finish' to download and install Spket IDE plugin.
- After installation you'll have to restart Eclipse.
Configuring the Spket Plugin
Now, we need to configure the Spket plugin for the Ext JS Framework. To do that:
- Once again, go to Windows menu -> Preferences.
- In the New Profile dialog, click the 'New…' button, enter a Name of 'ExtJS' and click OK to close the dialog.
Select the new 'ExtJS' profile in the profiles list and click 'Add Library'. This opens the 'Select Library' dialog:
- In the Select Library dialog, choose the 'ExtJS' from the dropdown and click 'OK':
Now, select the 'ExtJS' child node and click on 'Add Folder':
In the Browse for Folder dialog, navigate to the 'build' folder under the Ext JS 6 sdk folder which we downloaded earlier:
That will add all JS files under build folder.
- Now, set the 'ExtJS' profile as the Default by selecting it and clicking the 'Default' button.
- Finally, click the 'Apply and Close' button and restart Eclipse for the changes to take effect.
Testing the Autocomplete Feature
In this tutorial, we learned about the Sencha Ext JS Framework as well as how to configure Eclipse to work with the Free Sencha Ext JS Trial. In the next installment, we'll implement JS validation and learn how to code a basic Ext JS app.
Rob's alter-ego, "Blackjacques", is an accomplished guitar player, who has released several CDs and cover songs. His band, Ivory Knight, was rated as one of Canada's top hard rock and metal groups by Brave Words magazine (issue #92).