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:

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:

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:

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.

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.

The previous code shows how to import the library for a development environment. First, we import the stylesheet that is located at ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css. The second step is to import the whole library from ext-5.1.1/build/ext-all.js. The third step is to import a JavaScript file that contains overrides so the theme can work properly (specific adjustments on this theme).

Now we're ready to write our code in the app.js file.

Before we can start creating widgets, we need to wait until the DOM is ready to be used and Ext JS is loaded and parsed. Ext JS provides a function called Ext.onReady, which executes a callback automatically when all the nodes in the tree can be accessed. Let's write the following code in our app.js file:

Ext.onReady(function(){
  alert("This is my first Extjs app !");
});

An alternative to this code can also be:

Ext.application({
    name : 'MyFirstApplication',
    launch : function() {
        Ext.Msg.alert("Hello"," my first Ext JS app");
    }
});

One of the advantages of using Ext JS is that the library only uses one single object in the global scope called Ext to allocate all the classes and objects within the framework.

If you open the HTML file in your favorite browser, you will see something like the following screenshot:

If for some reason we can't see the alert message in our browser, it's because we haven't defined the correct path to the ext-all.js file. If you look at the JavaScript console, we'll probably see the following error:

Uncaught ReferenceError: Ext is not defined

This means that the ext-all.js file is not imported correctly. We need to make sure everything is correct with the path and refresh the browser again.

Now that we know how to execute code when the DOM is ready, let's send an alert message from the Ext library. Using the Ext.MessageBox alias Ext.Msg object, we can create different types of messages such as an alert, confirmation, prompt, progress bar, or even a custom message:

Ext.onReady(function(){
  //alert("This is my first Extjs app !");
  Ext.Msg.alert("Alert","This is my first Ext js app !");
});

The output for the preceding lines of code is shown in the following screenshot:

In this case, we're using the alert method of the Ext.Msg object. The first parameter is the title of the message and the second parameter is the content of the message. That was easy, right? Now let's create a confirmation dialog box:

Ext.onReady(function(){
  Ext.Msg.alert("Alert","This is my first Ext JS app !");
  Ext.Msg.confirm("Confirm","Do you like Ext JS 5?");
});

We use the confirm method to request two possible answers from the user. The first parameter is the title of the dialog box and the second parameter is the question or message we want to show to the user:

Before the confirmation dialog box appeared, there was an alert that didn't show up. One important thing to keep in mind is that the messages and alerts from the Ext library don't block the JavaScript loop, unlike the native browser dialog box. This means that if we add another alert or custom message after the confirm method is called, we will not see the confirmation dialog box anymore.

So far, we have shown a confirmation dialog box requesting two possible answers from the user, but how can we know the user's response in order to do something according to the answer? There's a third parameter in the confirmation dialog box, which is a callback function that will be executed when the user clicks on one of the two answers:

Ext.onReady(function(){
  Ext.Msg.alert("Alert","This is my first Ext JS app !");
  Ext.Msg.confirm("Confirm","Do you like Ext JS 5?",
    function(btn){
      if (btn === "yes") {
        Ext.Msg.alert("Great!","This is great!");
      } else {
         Ext.Msg.alert("Really?","That's too bad.");
      }
  });
});

The callback function is executed after the user clicks on the Yes or No button or closes the confirmation dialog box. The function receives the value of the clicked button as a parameter, which is Yes or No; we can do whatever we want inside the callback function. In this case, we're sending a message depending on the given answer. Let's refresh our browser and test our small program to watch our changes. Confirmations are usually asked when a user wants to delete something, or maybe when they want to trigger a long process, basically anything that has only two options.

XAMPP is an open source distribution of Apache that contains MySQL, PHP, and Perl, and is easy to install and easy to use. XAMPP can provide us with a local web development environment that is easy to handle without the need to test on a public server or hosting.

XAMPP is available for Windows (32-bit), Linux, and OS X versions and you can download XAMPP at https://www.apachefriends.org/index.html.

WAMP is another free package containing Apache, MySQL, and PHP, especially designed for the Windows OS. You can get it at http://www.wampserver.com/en/. WAMP comes in 32-bit and 64-bit versions according to your Windows OS.

In order to test the code or review some Ext JS examples, we will need a web server (Apache) or IIS to get the proper functionality and AJAX responses that the examples and code require.

The Aptana editor is an IDE from Appcelerator. It's based on Eclipse but optimized for web applications. It's an open source project and free of charge.

Among other IDEs, Aptana contains an autocomplete functionality for JavaScript and Ext JS, a JavaScript validator, a CSS and HTML validator, a JavaScript debugger, Bundles, and more:

Aptana is a great tool when working with Python, Ruby, or PHP as the backend of our projects. It contains tools to work with those out-of-the-box languages and also contains tools to deploy your application in the cloud using Heroku or Engine Yard.

The Sencha Architect desktop application is a tool that will help you design and develop an application faster than coding it by hand. The idea is to drag and drop the components into a canvas, and then add the functionality. The Sencha Architect desktop application is a product from Sencha Inc. that aims to help developers define components with a few clicks. We can create an Ext JS or Sencha Touch project. We can get a free trial from the official website of Sencha. We can also buy the license there.

One of the advantages that Architect has is that you can drag-and-drop components into the work zone and this tool will create (generate) the basic code of the components and/or the part(s) you are working with.

Also, you can switch to the code view and see the results so far (some parts of the Ext JS classes/components can be edited but not all of them). You can see the code view in the following screenshot:

The intention of this book is not to teach you about Sencha Architect, it's for you to understand and learn Ext JS and create applications without the need to use Sencha Architect. Later, if you feel you need to use Sencha Architect or want to give a try, it may be easier once you know the basics and essentials that are covered in this book.