In this article by Carlos A. Méndez, the author of the book Learning Ext JS – Fourth Edition, we will see some of the important features in Ext JS.

When learning a new technology such as Ext JS, some developers face a hard time to begin with, so this article will cover up certain important points that have been included in the recent version of Ext JS. We will be referencing certain online documentations, blogs and forums looking for answers, trying to figure out how the library and all the components work together. Even though there are tutorials in the official learning center, it would be great to have a guide to learn the library from the basics to a more advanced level.

Ext JS is a state-of-the-art framework to create Rich Internet Applications (RIAs). The framework allows us to create cross-browser applications with a powerful set of components and widgets. The idea behind the framework is to create user-friendly applications in rapid development cycles, facilitate teamwork (MVC or MVVM), and also have a long-term maintainability.

Ext JS is not just a library of widgets anymore; the brand new version is a framework full of new exciting features for us to play with. Some of these features are the new class system, the loader, the new application package, which defines a standard way to code our applications, and much more awesome stuff.

The company behind the Ext JS library is Sencha Inc. They work on great products that are based on web standards. Some of the most famous products that Sencha also have are Sencha Touch and Sencha Architect.

In this article, we will cover some of the basic concepts of the framework of version 5 and take a look at some of the new features in Ext JS 5.

(For more resources related to this topic, see here.)

Considering Ext JS for your next project

Ext JS is a great library to create RIAs that require a lot of interactivity with the user. If you need complex components to manage your information, then Ext is your best option because it contains a lot of widgets such as the grid, forms, trees, panels, and a great data package and class system.

Ext JS is best suited for enterprise or intranet applications; it’s a great tool to develop an entire CRM or ERP software solution. One of the more appealing examples is the Desktop sample (http://dev.sencha.com/ext/5.1.0/examples/desktop/index.html). It really looks and feels like a native application running in the browser. In some cases, this is an advantage because the users already know how to interact with the components and we can improve the user experience.

Ext JS 5 came out with a great tool to create themes and templates in a very simple way. The framework for creating themes is built on top of Compass and Sass, so we can modify some variables and properties and in a few minutes we can have a custom template for our Ext JS applications. If we want something more complex or unique, we can modify the original template to suit our needs. This might be more time-consuming depending on our experience with Compass and Sass.

Compass and Sass are extensions for CSS. We can use expressions, conditions, variables, mixins, and many more awesome things to generate well-formatted CSS. You can learn more about Compass on their website at http://compass-style.org/.

The new class system allows us to define classes incredibly easily. We can develop our application using the object-oriented programming paradigm and take advantage of the single and multiple inheritances. This is a great advantage because we can implement any of the available patterns such as MVC, MVVM, Observable, or any other. This will allow us to have a good code structure, which leads us to have easy access for maintenance.

Another thing to keep in mind is the growing community around the library; there are lot of people around the world that are working with Ext JS right now. You can even join the meeting groups that have local reunions frequently to share knowledge and experiences; I recommend you to look for a group in your city or create one.

The new loader system is a great way to load our modules or classes on demand. We can load only the modules and applications that the user needs just in time. This functionality allows us to bootstrap our application faster by loading only the minimal code for our application to work.

One more thing to keep in mind is the ability to prepare our code for deployment. We can compress and obfuscate our code for a production environment using the Sencha Command, a tool that we can run on our terminal to automatically analyze all the dependencies of our code and create packages.

Documentation is very important and Ext JS has great documentation, which is very descriptive with a lot of examples, videos, and sample code so that we can see it in action right on the documentation pages, and we can also read the comments from the community.

What’s new in Ext JS 5

Ext JS 5 introduces a great number of new features, and we’ll briefly cover a few of the significant additions in version 5 as follows:

• Tablet support and new themes: This has introduced the ability to create apps compatible with touch-screen devices (touch-screen laptops, PCs, and tablets). The Crisp theme is introduced and is based on the Neptune theme. Also, there are new themes for tablet support, which are Neptune touch and Crisp touch.
• New application architecture – MVVM: Adding a new alternative to MVC Sencha called MVVM (which stands for Model-View-ViewModel), this new architecture has data binding and two-way data binding, allowing us to decrease much of the extra code that some of us were doing in past versions. This new architecture introduces:
  • Data binding
  • View controllers
  • View models
• Routing: Routing provides deep linking of application functionality and allows us to perform certain actions or methods in our application by translating the URL. This gives us the ability to control the application state, which means that we can go to a specific part or a direct link to our application. Also, it can handle multiple actions in the URL.
• Responsive configurations: Now we have the ability to set the responsiveConfig property (new property) to some components, which will be a configuration object that represents conditions and criteria on which the configurations set will be applied, if the rule meets these configurations. As an example:

  responsiveConfig: {
  'width > 800': { region: 'west' },
  'width <= 800':{ region: 'north' }
  }

• Data package improvements: Some good changes came in version 5 relating to data handling and data manipulation. These changes allowed developers an easier journey in their projects, and some of the new things are:
  • Common Data (the Ext JS Data class, Ext.Data, is now part of the core package)
  • Many-to-many associations
  • Chained stores
  • Custom field types
• Event system: The event logic was changed, and is now a single listener attached at the very top of the DOM hierarchy. So this means when a DOM element fires an event, it bubbles to the top of the hierarchy before it’s handled. So Ext JS intercepts this and checks the relevant listeners you added to the component or store. This reduces the number of interactions on the DOM and also gives us the ability to enable gestures.
• Sencha Charts: Charts can work on both Ext JS and Sencha Touch, and have enhanced performance on tablet devices. Legacy Ext JS 4 charts were converted into a separate package to minimize the conversion/upgrade. In version 5, charts have new features such as:
  • Candlestick and OHLC series
  • Pan, zoom, and crosshair interactions
  • Floating axes
  • Multiple axes
  • SVG and HTML Canvas support
  • Better performance
  • Greater customization
  • Chart themes
• Tab Panels: Tab panels have more options to control configurations such as icon alignment and text rotation. Thanks to new flexible Sass mixins, we can easily control presentation options.
• Grids: This component, which has been present since version 2x, is one of the most popular components, and we may call it one of the cornerstones of this framework. In version 5, it got some awesome new features:
  • Components in Cells
  • Buffered updates
  • Cell updaters
  • Grid filters (The popular “UX” (user extension) has been rewritten and integrated into the framework. Also filters can be saved in the component state.)
  • Rendering optimizations
• Widgets: This is a lightweight component, which is a middle ground between Ext.Component and the Cell renderer.
• Breadcrumb bars: This new component displays the data of a store (a specific data store for the tree component) in a toolbar form. This new control can be a space saver on small screens or tablets.
• Form package improvements: Ext JS 5 introduces some new controls and significant changes on others:
  • Tagfield: This is a new control to select multiple values.
  • Segmented buttons: These are buttons with presentation such as multiple selection on mobile interfaces.
  • Goodbye to TriggerField: In version 5, TriggerField is deprecated and now the way to create triggers is by using the Text field and implementing the triggers on the TextField configuration. (TriggerField in version 4 is a text field with a configured button(s) on the right side.) 
  • Field and Form layouts: Layouts were refactored using HTML and CSS, so there is improvement as the performance is now better.
• New SASS Mixins (http://sass-lang.com/): Several components that were not able to be custom-themed now have the ability to be styled in multiple ways in a single theme or application. These components are:
  • Ext.menu.Menu
  • Ext.form.Labelable
  • Ext.form.FieldSet
  • Ext.form.CheckboxGroup
  • Ext.form.field.Text
  • Ext.form.field.Spinner
  • Ext.form.field.Display
  • Ext.form.field.Checkbox
• The Sencha Core package: The core package contains code shared between Ext JS and Sencha Touch and in the future, this core will be part of the next major release of Sencha Touch. The Core includes:
  • Class system
  • Data
  • Events
  • Element
  • Utilities
  • Feature/environment detection

Preparing for deployment

So far, we have seen a few features that helps to architect a JavaScript code; but we need to prepare our application for a production environment.

So initially, when an application is in the development environment, we need to make sure that Ext JS classes (also our own classes) are dynamically loaded when the application requires to use them. In this environment, it’s really helpful to load each class in a separate file. This will allow us to debug the code easily, and find and fix bugs.

Now, before the application is compiled, we must know the three basic parts of an application, as marked here:

• app.json: This file contains specific details about our application. Also, Sencha CMD processes this file first.
• build.xml: This file contains a minimal initial Ant script, and imports a task file located at .sencha/app/build-impl.xml.
• .sencha: This folder contains many files related to, and are to be used for, the build process.

The app.json file

As we said before, the app.json file contains the information about the settings of the application. Open the file and take a look. We can make changes to this file, such as the theme that our application is going to use. For example, we can use the following line of code:

"theme": "my-custom-theme-touch",

Alternatively, we can use a normal theme:

"theme": "my-custom-theme",

We can also use the following for using charts:

"requires": [
"sencha-charts"
],

This was to specify that we are going to use the charts or draw classes in our application (the chart package for Ext JS 5). Now, at the end of the file, there is an ID for the application:

"id": "7833ee81-4d14-47e6-8293-0cb8120281ab"

After this ID, we can add other properties. As an example, suppose the application will be generated for Central and South America. Then we need to include the locale (ES or PT), so we can add the following:

,"locales":["es"]

We can also add multiple languages:

,"locales":["es","pt","en"]

This will cause the compilation process to include the corresponding locale files located at ext/packages/ext-locale/build.

However, this article can’t cover each property in the file, so it’s recommended that you take a deep look into the Sencha CMD documentation at: http://docs-origin.sencha.com/cmd/5.x/microloader.html to learn more about the app.json file.

The Sencha command

To create our production build, we need to use the Sencha Command. This tool will help us in our purpose.

If you are running Sencha CMD on Windows 7 or Windows 8, it’s recommended that you run the tool with “administrator privileges”.

So let’s type this in our console tool:

[path of my app]\sencha app build

In my case (Windows OS 7; 64-bit), I typed:

K:\x_extjsdev\app_test\myapp>sencha app build

After the command runs, you will see something like this in your console tool:

So, let’s check out the build folder inside our application folder. We may have the following list of files:

Notice that the build process has created these:

• resources: This file will contain a copy of our resources folder, plus one or more CSS files starting with myApp-all
• app.js: This file contains all of the necessary JS (Ext JS core classes, components, and our custom application classes)
• app.json: This is a small manifest file compressed
• index.html: This file is similar to our index file in development mode, except for the line:

  <script id="microloader" type="text/javascript" src="bootstrap.js"></script>

  This was replaced by some compressed JavaScript code, which will act in a similar way to the micro loader.

Notice that the serverside folder, where we use some JSON files (other cases can be PHP, ASP, and so on), does not exist in the production folder. Well, the reason is that that folder is not part of what Sencha CMD and build files consider.

Normally, many developers will say, “Hey, let’s copy the folder and let’s move on.” However, the good news is that we can include that folder with an Apache Ant task

Customizing the build.xml file

We can add custom code (Apache Ant style) to perform new tasks and things we need in order to make our application build even better. Let’s open the build.xml file. You will see something like this:

<?xml version="1.0" encoding="utf-8"?>
<project name="myApp" default=".help">
<!-- comments... -->
<import file="${basedir}/.sencha/app/build-impl.xml"/>
<!-- comments... -->
</project>

So, let’s place the following code before </project>:

<target name="-after-build" depends="init">
<copy todir="${build.out.base.path}/serverside"
overwrite="false">
<fileset dir="${app.dir}/serverside" includes="**/*"/>
</copy>
</target>
</project>

This new code inside the build.xml file establishes that after making the whole building process, if there is no error during the Init process then it will copy the (${app.dir}/ serverside) folder to the (${build.out.base.path}/serverside) output path. So now, let’s type the command for building the application again:

sencha app build –c

In this case, we added -c to first clean the build/production folder and create a new set of files. After the process completes, take a look at the folder contents, and you will see this:

Notice that now the serverside folder has been copied to the production build folder, thanks to the custom code we placed in build.xml file.

Compressing the code

After building our application, let’s open the app.js file. We may see something like what is shown here:

By default, the build process uses the YUI compressor to compact the JS code (http://yui.github.io/yuicompressor/). Inside the .sencha folder, there are many files, and depending on the type of build we are creating, there are some files such as the base file, where the properties are defined in defaults.properties. This file must not be changed whatsoever; for that, we have other files that can override the values defined in this file. As an example for the production build, we have the following files:

• production.defaults.properties: This file will contain some properties/variables that will be used for the production build.
• production.properties: This file has only comments. The idea behind this file is that developers place the variables they want in order to customize the production build.

By default, in the production.defaults.properties file, you will see something like the following code:

# Comments ......
# more comments......
build.options.logger=no
build.options.debug=false
# enable the full class system optimizer
app.output.js.optimize=true
build.optimize=${build.optimize.enable}
enable.cache.manifest=true
enable.resource.compression=true
build.embedded.microloader.compressor=-closure

Now, as an example of compression, let’s make a change and place some variables inside the production.properties file. The code we will place here will override the properties set in defaults.properties and production.defaults.properties. So, let’s write the following code after the comments:

build.embedded.microloader.compressor=-closure
build.compression.yui=0
build.compression.closure=1
build.compression=-closure

With this code, we are setting up the build process to use closure as the JavaScript compressor and also for the micro loader. Now save the file and use the Sencha CMD tool once again:

sencha app build

Wait for the process to end and take a look at app.js.

You can notice that the code is quite different. This is because the code compiler (closure) was the one that made the compression. Run the app and you will notice no change in the behavior and use of the application.

As we have used the production.properties file in this example, notice that in the .sencha folder, we have some other files for different environments, such as:

Environment	File (or files)
Testing	testing.defaults.properties and testing.properties
Development	development.defaults.properties and development.properties
Production	production.defaults.properties and production.properties

It’s not recommended that you change the *.default.properties file. That’s the reason of the *.properties file, so that you can set your own variables, and doing this will override the settings on default file.

Packaging and deploying

Finally, after we have built our application, we have our production build/package ready to be deployed. We will have the following structure in our folder:

Now we have all the files required to make our application work on a public server. We don’t need to upload anything from the Ext JS folder because we have all that we need in app.js (all of the Ext JS code and our code). Also, the resources file contains the images, CSS (the theme used in the app), and of course our serverside folder. So now, we need to upload all of the content to the server:

And we are ready to test the production in a public server.

Summary

In this article, you learned the reasons that will make us to consider using Ext JS 5 for developing projects. We briefly mentioned some of the significant additional features in version 5 that are instrumental in developing applications.

Later, we talked about compiling and preparing an application for a production environment. Using Sencha CMD and also configuring JSON or XML files to build a project can sometimes be an overwhelming situation, but don’t panic! Check out the documentation of Sencha and Apache. Do remember that there’s no reason to be afraid of testing and playing with the configurations. It’s all part of learning and knowing how to use Sencha Ext JS.

Resources for Article:

---

Further resources on this subject:

• The Login Page using Ext JS [Article]
• So, what is Ext JS? [Article]
• AngularJS Performance [Article]

---