Getting started with Ext JS

So, let's begin with Ext JS! The first thing we should do is download the framework from the official website, http://www.sencha.com/products/extjs/. The version available at the time of writing this book is 5.1.1.

There are three types of license:

• The open source license: If you are creating or want to develop an open source application compatible under the GNU GPL license v3 (http://www.gnu.org/copyleft/gpl.html).
• The commercial license: You need to buy this if you are planning/wanting to develop a closed source project and want to keep the source code as your own property. Usually used by corporations, banks, or enterprises.
• The commercial OEM: If you want to use Ext JS to create your own commercial SDK or web application builder, or use it as frontend for some embedded device, then this comes into the picture. As this type of license can vary, it's customized for each customer.

You can see more detailed information about this subject at http://www.sencha.com/products/extjs/licensing.

Downloading Ext JS

If you download Ext JS directly from http://www.sencha.com/products/download/, this will be a 30-day trial version of Ext JS and you will also be required to enter some personal information in order to get the trial. To obtain the GPL version, you can get it from http://www.sencha.com/legal/GPL/. We can also use the available Content Delivery Network (CDN), as shown in the following table, so that we don't need to store the library on our own computer or server:

Theme	Links
Classic	CSS file: http://cdn.sencha.com/ext/trial/5.1.1/packages/ext-theme-classic/build/resources/ext-theme-classic-all.css JavaScript file: http://cdn.sencha.com/ext/trial/5.1.1/build/ext-all.js
Neptune	CSS file: http://cdn.sencha.com/ext/trial/5.1.1/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css JavaScript file: http://cdn.sencha.com/ext/trial/5.1.1/build/ext-all.js Theme JS Overrides: http://cdn.sencha.com/ext/trial/5.1.1/packages/ext-theme-neptune/build/ext-theme-neptune.js
Crisp	CSS file: http://cdn.sencha.com/ext/trial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css JavaScript file: http://cdn.sencha.com/ext/trial/5.1.1/build/ext-all.js Theme JS Overrides: http://cdn.sencha.com/ext/trial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js

Setting up and installing Ext JS 5

After you download the Ext JS Library (ZIP file), extract the contents to a working folder. For the first time, you will probably get overwhelmed by the size of the ZIP file and by the number of files and folders, but don't worry, the purpose of each file and the content of each folder will be explained shortly.

Sencha Cmd

Besides the Ext JS library, we need to download the Sencha Cmd (command tool). This tool is intended to be a cornerstone for building applications, creating workspaces, and new themes, and the ability to minify and deploy our applications to a production environment.

Download this tool at http://www.sencha.com/products/sencha-cmd/ and also check that the following requirements are met in order for Sencha Cmd to work properly:

• JRE Sencha Cmd requires Java Runtime Environment version 1.7 to support all functionality, however, most features will work with 1.6 (the minimum supported version).
• Ruby differs by OS:
  • Windows: Download Ruby from http://rubyinstaller.org. Get the .exe file version of the software and install it.
  • Mac OS: Ruby is preinstalled. You can test whether Ruby is installed with the Ruby -v command.
  • Linux-based OS: Use sudo apt-get install ruby 2.0.0 to download Ruby.

Run the Sencha Cmd setup, follow the instructions, and after installing Sencha Cmd, we need to verify the installation. Proceed to open the command line and type the following command:

sencha

Tip

On Windows environments, it's recommended that you restart the system after installation in order to get the proper environment variables applied.

After typing the command Sencha, we should see the following output:

Why so many files and folders?

This is a natural question when you look at the downloaded files and folders for the first time, but every file and folder is there for a purpose and now you're going to learn it:

• The build folder contains compiled files of the SDK and is ready to be used. This folder is very useful to start with in Ext JS without the need to use Sencha Cmd. From version 5, this folder also contains examples and ready-to-use Ext JS themes located in packages (folder).
• The examples folder contains the source code of the examples. These examples are built to show what we can do with the library. However one significant change in version 5 is that this folder needs to be compiled using Sencha Cmd in order to be deployed/compiled into the build folder.
• The overrides folder contains JavaScript files used to add extra functionality and behavior to components and widgets and they are also used when an application or code is compiled.
• The packages folder is where the styles and images are located; we can also find the Sass files to create our custom theme in here. Sass is an extension of CSS3 to improve the language; we can use variables, mixins, conditionals, expressions, and more with Sass. From version 5 onward, this folder also contains more folders, which are Locales, Ext JS Core, Charts, Aria, and many more.
• The src folder contains the source code files that are part of the framework. Each file represents a class/object so we can read it easily, and every folder corresponds to the namespace assigned to the class. For example, the Ext.grid.Panel class is in a file called Panel.js, which in a folder called grid (src/grid/Panel.js).
• The welcome folder contains the styles and images that are shown when we open the index.html file in the root folder.

  If you look at the root folder, you can also see other JavaScript files. Basically, they are the compressed, debug, and development versions of the library.

• The bootsprap-*.js files contain information about the framework; these files are used by ext*.js files in order to load the required files (the src folder or packages folder).
• The ext-all.js file loads the complete library with all the components, utilities, and classes.
• The ext-all-debug.js file is the same as the ext-all.js file. The difference is that this file will show console logs and we can use this file to debug our application.
• The ext.js file is the core and foundation layer for Ext JS. If we use this file, we're not loading the whole library; this file contains only the class system, the loader, and a few other classes. We can use the Ext.Loader class to load just the required classes and not the entire framework.

Folders that changed in version 5 from previous versions

Developers that use previous versions of Ext JS may find the new folder structure confusing, and may notice that some of folders disappeared in version 5. The significant changes to folders are listed below. The builds folder no longer exists; instead, we should use the build folder.

• The locale folder has been moved to the packages/ext-locale folder. In version 5, Locales have a more complex folder structure and we also now have the ext-locale-language.js file and ext-locale-language-debug.js file. By default, the components are displayed in English, but you can translate them to any other language.
• The jsbuilder folder was removed, now in version 5 we will use Sencha Cmd to build and compress our source code.
• The ext*-dev.js file was removed in version 5, as according to Sencha, there was much confusion about the use of these files. On Sencha Touch these files were merged and following the same pattern as Sencha Touch on Ext JS. *-dev.js files and ext*-debug.js files were merged into one.
• The resources folder was removed, so now we need to use the packages folder.
• The docs folder was removed, so as of version 5, developers should check the documentation and guides at http://docs.sencha.com/. Also, there is an alternative to download the offline documentation selection (offline docs) from the link in the documentation menu:
  

Now that you have a basic understanding of the downloaded files and folders, we can advance to the next step of "getting started."

Looking at the whole picture

Before we start writing code, you need to learn and understand a few concepts first. Ext JS is divided into three layers, as shown in the following screenshot. The purpose of these layers is to share code with Sencha Touch, a framework to create mobile web applications.

In the Ext Foundation layer, the Ext object is created, as well as some useful utilities and the class system that allows us to extend classes, override methods and properties, add mixins and configurations to classes, and many more things.

Note

To understand more about mixins, see http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.Mixin.

The Ext Core layer contains the classes that manage the Document Object Model (DOM), the setting and firing of events, support for Ajax requests, and classes to search the DOM using CSS selectors. Also now, part of Ext.Core is the data package (classes related to data such as fields, store, and so on). As of version 5.1, Ext JS Core will have common shared code with Sencha Touch (the next major release).

Finally, the Ext JS 5 layer contains all the components, widgets, and many more features that you're going to be learning about in this book.