Getting Started with Ext JS

As a new developer at SwarmOnline, I first started using Ext JS around 4 months ago so this seems like a good time to reflect on what I’ve learned and hopefully others will benefit from this experience.

Firstly, Ext JS is a JavaScript application framework for building interactive cross platform web applications.  It has the best of both worlds, with the flexibility of JavaScript but also with a unified structure meaning an organised architecture. As JavaScript is a classless language this framework is really beneficial for maintaining an application. The latest version of the framework can be downloaded here.

File Structure
In the unified structure that Ext JS has in place, the models, stores and views are placed in the app folder.

The application.js file contains the global settings for the application such as shared stores, models and controllers. Ext JS provides two different toolkits – classic and modern. The classic toolkit builds the desktop version of the app whereas modern builds the mobile version.

Architecture
Ext JS supports both Model-View-Controller (MVC) and Model-View-ViewModel (MVVM) architectures. The main difference between MVC and MVVM is that MVVM has a ViewModel which is able to manage data specific to the view. This comes in handy when a component in the view, for example a chart, needs to be updated when data is changed.

As well as controllers there are also view controllers. Similarly to the ViewModel, the difference between a controller and a view controller is that the view controller is specific to the view it references. A good thing about a view controller is that it can be destroyed with the view whereas alternatively a main controller is present throughout the app.

Ext JS Components
Ext JS components are essentially the widgets that make up the Ext JS application. As a component is a subclass of Ext.component it means that they can be resized, positioned, rendered and destroyed.

Some examples of Ext JS components include:

• Containers
• Charting
• Forms
• Grids (tables)

Ext JS also includes a rich set of widgets such as text fields, combo boxes and radio buttons. All components can be found on the Sencha Docs along with the configs and methods they utilise. In particular, the use of grids were a real turning point for me as it helped me understand how a component works with a controller, model or store.

Sencha Cmd
The Sencha Cmd is responsible for building the Ext JS application. It can be downloaded for free here.
Firstly in order to generate the skeleton of the application the following command is used:

sencha -sdk /path/to/ext6 generate app MyApp /path/to/my-app

This in turn creates the unified structure previously mentioned. Furthermore the command sencha app build classic builds the desktop application whereas sencha app build modern builds the mobile application. A useful command for making CSS changes is sencha app watch. When this command runs, it listens for changes made to your project which saves a lot of time as you don’t have to keep rebuilding after every little style change.

There are many more useful commands that are outlined and explained here.

Challenges
A challenge I faced when first starting to use Ext JS was the fact I had never used a JavaScript application framework before and previously used HTML, JavaScript and CSS which was a transition but has made me a better developer in the process. The good thing about the Ext JS framework is that with basic javascript knowledge it can be fairly easy to pick up. Moreover the most difficult aspect I found was creating a line chart using Ext JS sprites instead of using one that Ext JS already had in place. This involved a great deal of JavaScript in order to calculate where each line on the graph would go but equally the framework played a big part in terms of the sprite configs and rendering them the view when the data is loaded.

My 5 Helpful Tips for Using Ext JS

1. Using XTypes
In Ext JS, each component has an ‘XType’ which acts as the shortcut to the full component name. For example, the button component (Ext.button.Button) has the XType ‘button’.  XTypes can be used for adding a class to the view.

2. Class Declaration
Before I started using Ext JS I had experience using Java which is a class-based language but how classes are declared in Ext JS are of course different from this. To define a class the Ext.define() method is used. The first parameter of this method is the class name and the second parameter is the arguments passed to this class’s constructor.

Ext.define('MyApp.folder.ClassName', {
    someProperty: 'something',

    someMethod: function(s) {
        alert(s + this.someProperty);
    }

        ...
});

3. The Testing Build
When in the production build of your application, you may get an error in the console but no detail is given on the issue but there is a way around this using Sencha Cmd. The command to solve this problem is sencha app -e testing. By doing this, you can go to the testing build instead of production, recreate the error, and more details such as line number and class name where it has occurred will be displayed.

4. Avoid the use of global variables
Across all programming languages, global variables are something that are discouraged due to various reasons. One of these reasons is that they are difficult to debug meaning that if you have an issue with a piece of code because of a global variable, it may be challenging to pinpoint that this is the problem. Moreover global variables are generally bad practice when it comes to programming.  An alternative solution I found when faced with a problem involving passing a variable from one view to another was to use the config that the framework has in place. This is an example of the config:

config: {

name: "Chris"

}

After building the application, you will then be able to call getter and setter methods using the ‘name’ config in this example.  So calling the method setName("Andy") would set the config to the new value and then if we call getName(), ‘Andy’ would be returned.

5. Use itemId instead of id
One of the issues I came across was when using id’s for components. This caused problems when switching to a new view when the previous view wasn’t destroyed. I soon found out that using an itemId instead would solve this issue as they are specific to the view they are in. As a result it is encouraged to use itemId instead of id when possible as it is more flexible.

Useful Links
The Sencha Ext JS Docs contains information on every config, method, event, property and so on, for that version of the framework. It is highly recommended that this is used whenever it’s required as personally it has been a great help.

The Ext JS Kitchen Sink is great for looking at examples of various components with a side-by-side view of the code and the produced result. I find this very useful when trying to create a chart using Ext JS, but also which chart would be visually best for displaying the set of data.

Sencha Fiddle comes in handy when you want to try out code without having to load a full application on your machine.

Since I’ve started using Ext JS I feel I’ve learned a lot not only about Ext JS but frameworks in general. Moving forward there is still lots to learn and I will continue to improve my Ext JS knowledge, skills and techniques. Get in touch for help with Ext JS or to find out more about SwarmOnline’s services. 

GET IN TOUCH NOW