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.
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 | |
|
Neptune |
|
|
Crisp |
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.
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
.exefile version of the software and install it.Mac OS: Ruby is preinstalled. You can test whether Ruby is installed with the Ruby
-vcommand.Linux-based OS: Use
sudo apt-get install ruby 2.0.0to 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:
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
buildfolder 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
examplesfolder 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
overridesfolder 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
packagesfolder 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 areLocales,Ext JS Core,Charts,Aria, and many more.The
srcfolder 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, theExt.grid.Panelclass is in a file calledPanel.js, which in a folder calledgrid(src/grid/Panel.js).The
welcomefolder contains the styles and images that are shown when we open theindex.htmlfile in therootfolder.If you look at the
rootfolder, you can also see other JavaScript files. Basically, they are the compressed, debug, and development versions of the library.The
bootsprap-*.jsfiles contain information about the framework; these files are used byext*.jsfiles in order to load the required files (the src folder or packages folder).The
ext-all.jsfile loads the complete library with all the components, utilities, and classes.The
ext-all-debug.jsfile is the same as theext-all.jsfile. The difference is that this file will show console logs and we can use this file to debug our application.The
ext.jsfile 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 theExt.Loaderclass to load just the required classes and not the entire framework.
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
localefolder has been moved to thepackages/ext-localefolder. In version 5, Locales have a more complex folder structure and we also now have theext-locale-language.jsfile andext-locale-language-debug.jsfile. By default, the components are displayed in English, but you can translate them to any other language.The
jsbuilderfolder was removed, now in version 5 we will use Sencha Cmd to build and compress our source code.The
ext*-dev.jsfile 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.jsfiles andext*-debug.jsfiles were merged into one.The
resourcesfolder was removed, so now we need to use thepackagesfolder.The
docsfolder 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."
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.