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:
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:
United States
Great Britain
India
Germany
France
Canada
Russia
Spain
Brazil
Australia
Singapore
Canary Islands
Hungary
Ukraine
Luxembourg
Estonia
Lithuania
South Korea
Turkey
Switzerland
Colombia
Taiwan
Chile
Norway
Ecuador
Indonesia
New Zealand
Cyprus
Denmark
Finland
Poland
Malta
Czechia
Austria
Sweden
Italy
Egypt
Belgium
Portugal
Slovenia
Ireland
Romania
Greece
Argentina
Netherlands
Bulgaria
Latvia
South Africa
Malaysia
Japan
Slovakia
Philippines
Mexico
Thailand
