Is it just me, or are there an awful lot of JavaScript frameworks around right now? While skimming over contracts online, I noticed that each job requires expertise in a different framework. Just to clarify, a JavaScript fraramework is a client-side collection of components and libraries to fulfill the needs of a single page web application in browser clients. Hence, a framework is more than a library, like jQuery or Dojo; it handles bigger jobs like routing between web pages, networking with the back-end, and organizing files within a project.
Upon closer inspection, it becomes apparent that different JavaScript frameworks help with different aspects of web app development. For instance, the Sencha Ext JS Web App Framework helps you build data-intensive, cross-platform web apps for desktops, tablets, and smartphones. It also features over a hundred high-performance, pre-tested and integrated UI components including calendar, grids, and charts.
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
Now, we’re going to install the Spket IDE plugin. The Spket IDE is powerful toolkit for JavaScript and XML development. The Spket editor adds features like code completion, syntax highlighting and content outline that helps developers productively create efficient JavaScript code.
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.
-
Next, expand the Spket node in the left-hand tree and select ‘JavaScript Profiles’:
- 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
Now, create a new generic project and JavaScript file. In the file, type “Ext.a”. That should cause the autocomplete feature to appear (if it doesn’t, try pressing Ctrl + Space):
Conclusion
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.