Ext JS 6 - The complete installation guide

This guide provides instructions for getting your environment ready for Ext JS 6 development. It also discusses the other software that is required before you can complete and publish your first project.

This guide also aims to provide you with a clear path to avoid common app build problems related to the installation of Sencha Cmd. It’s important to understand the various dependencies to ensure a clean installation of Sencha Cmd.

Required Dependencies

Let’s take a look at the dependencies. Ext JS 6 development requires the following items to run at functionality:

After purchasing the Ext JS license, you will get access to the Sencha support portal. From here, you can download the latest Sencha Cmd and Ext JS framework versions.

Java and Sencha Cmd must be available via the command line. When installing these tools, the installer will add it to the PATH system variable.

That said, these variables occasionally get lost or are not added at all. When that happens, these tools are not available on the command line. If they’re not available to the command line, they are also inaccessible by Sencha Cmd. That said, it’s very important that these paths are set properly.

To set system variables, see the system environment section in this guide, which explains how to add Sencha Cmd or Java to the class path.

Optional Dependencies

After purchasing the Ext JS Premium license, you will get access to the Ext JS 6 Pivot grid and JetBrains IDE plugin by downloading the Addons and plugin from the Sencha support portal.

Required Dependencies Installation

Java Runtime Environment (JRE)

To start, here are links for downloading Java JRE 1.7 and JDK.

Sencha Cmd requires the JRE. You will need Cmd to produce a valid build, so it’s necessary to have Java installed properly. Open a command line tool to test for Java’s proper installation.

Mac OSX

Mac OSX users can simply open Terminal.

Windows

Windows users can open the command line by entering cmd from the start screen.

Once your command line is available, issue the following command.

java -version

If correctly installed, it should produce the following version information:

>java -version

java version "1.7.0_40"

Java(TM) SE Runtime Environment (build 1.7.0_40-b43)

Java HotSpot(TM) 64-Bit Server VM (build 24.0-b56, mixed mode)

For a bit more information, the Java Runtime Environment is an implementation of the Java Virtual Machine that executes Java programs. Without the JRE, you can compile an application but can’t run it.

The Java Development Kit (JDK) is a software bundle that you can use to develop Java-based software. Since the JRE contains the JVM which executes the bytecode generated from the javac compiler, you need to add your JRE path as the JAVA_HOME variable from the environment variables.

Note: The JDK contains the JRE, so if you have set your PATH properly, you shouldn’t need a separate entry for the JRE.

Adding Java to your PATH

Windows

Add the following bits of information to your System Variables to add Java to your PATH:

variable name:

JAVA_HOME

variable value:

c:\jdk1.7.0_40

variable name:

PATH

variable value:

%PATH%;%JAVA_HOME%\bin\

Mac OSX / Linux

Unless you have intentionally changed your Java path, Java is most likely installed here:

/Library/Java/JavaVirtualMachines/<java version>/.

Add the following lines to your ~/.bash_profile to add Java to your PATH:

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.7.0_40.jdk/Contents/Home

export PATH=$JAVA_HOME/bin:$PATH

For more information see: http://java.com/en/download/help/path.xml

Sencha Cmd 6

Sencha Cmd encapsulates a very useful set of tools. Not only can you build your applications, but you can also build themes, generate code, or use the built-in web server. You can test for proper Sencha Cmd installation from the command line by issuing the following:

> sencha which

If correctly installed, it should output the version number. For example:

> sencha which

Sencha Cmd v6.0.1.13

/Users/<User>/bin/Sencha/Cmd/6.0.1.13/

Adding Cmd to your PATH

Run the following commands in your terminal to add Cmd to your PATH.

Windows

Unless otherwise specified, Windows users can assume Sencha Cmd is installed at c:\sencha\cmd\6.x.x.x. Add the following bits of information to your System Variables to add Sencha Cmd to your PATH: (the version number should point to your version folder.)

variable name:

PATH

variable value:

%PATH%;c:\sencha\cmd\6.0.1.13\

Mac OSX / Linux

Unless otherwise specified, Mac/Linux users can assume Sencha Cmd is installed at ~/bin/sencha/cmd/6.x.x.x.

Add the following lines to your ~/.bash_profile to add Sencha Cmd to your PATH: (the version number should point to your version folder.)

export PATH=~/bin/Sencha/Cmd/6.0.1.13:$PATH

Ext JS 6

After purchasing the Ext JS license, you will get access to framework from the Sencha support portal.

Download the framework and unzip it to a place on your hard-drive.

Optional Installation Dependencies

Ruby, Sass & Compass

With the release of Ext JS 6, we no longer require Ruby for theming, since Sencha Cmd is using its own JavaScript compilation called Fashion.

However, in case you are planning to build Ext JS 5 applications with Sencha Cmd 6, or when you want integrate Compass with your project, it is possible to install this together with Sencha Cmd 6.

To check if Ruby is correctly installed, run the following command:

> ruby -v

If correctly installed, it should output version information as such:

> ruby -v

ruby 2.0.0p451 (2014-02-24 revision 45167) [universal.x86_64-darwin13]

Windows

Windows users will have to download Ruby. If Ruby is not yet installed, you can download it here.

Make sure you run the Ruby installer with admin rights. To enable admin rights, right click on the installer executable and select “run as administrator”. During the installation, you will need to mark the check-box that asks for permission to add Ruby to your PATH variables.

Mac OSX / Linux

Ruby is automatically installed on Mac OSX machines. No further action should be required.

Sass


To install Sass from the command-line enter the following command. (Mac OSX / Linux users might need to prefix with the command: sudo.

gem install sass

Compass


To install Compass from the command-line enter the following command. (Mac OSX / Linux users might need to prefix with the command: sudo.

gem install compass

Sencha JetBrains Plugin

The Sencha JetBrains IDE plugin is port of the pro and premium tiers.

Sencha’s JetBrains plugin is an Integrated Development Environment tool that creates a confluence between Sencha Frameworks and JetBrains software. This integration comes in the form of code completion, inspection, and suggestion, while seamlessly cooperating with native JetBrains behavior.

Sencha experts will love the the ease with which changes are refactored and how simple it is to trace code to the source.

Sencha beginners will benefit as the JetBrains plugin provides completion suggestions while encouraging best-practice code structure and syntax.

This plugin brings Sencha support to these JetBrains Products:

Download the plugin from the support portal. It’s a zip file.

  1. In the IDE, click Preferences -> Plugins -> Sencha Ext JS
  2. Click the button Install plugin from disk, select the zip file.
  3. Restart the IDE.

After restart, you will run the trial version. You will need to click on the message to activate the Sencha plugin. Login with your sencha (forum) id (not the email), your password and the activation key (40 characters key).

Click Activate and your plugin is successfully installed and activated.

For information about the plugin see: http://docs.sencha.com/tools/ide_plugins/jetbrains_ide_plugin.html

App Templates

The Sencha JetBrains IDE plugin is port of the pro and premium tiers.

App templates are full working boilerplate examples. You can use this code, to quickly develop a Sencha application within a day.

http://examples.sencha.com/extjs/6.0.0/examples/admin-dashboard/#dashboard

The admin dashboard app template can be found in the folder:

<ext6-sdk-folder>/template/admin-dashboard

For a full tutorial on how to use the app template, please see:

http://www.ladysign-apps.com/developer/working-with-sencha-app-templates-boilerplate-ext-js-6-code/

Sencha Inspector

Sencha Inspector is part of the premium tier.

The Sencha Inspector is a stand-alone desktop application that provides intelligent debugging for Ext JS applications. It aims to complement existing developer tools provided by consumer web browsers. On top of that, it also includes a theme roller, to create themes easily.

Sencha Inspector hosts an internal web server that runs on your machine’s localhost. This local web server helps Sencha Inspector connect to your client applications via a web socket. This allows Sencha Inspector to analyze your client application’s’ runtime.

  1. Run the executable installer and walk through the install process
  2. Run Sencha Inspector from its installation path

For more information about Sencha Inspector see:

http://docs.sencha.com/tools/sencha_inspector/installation_setup.html

Ext JS 6 Pivot Grid

Sencha Inspector is part of the premium tier.

The Pivot Grid component enables rapid summarization of large sets of data. It provides a simple way to condense many data points into a format that makes trends and insights more apparent. A classic example is sales data. A company will often have a record of all sales it makes for a given period. This will often encompass thousands of rows of data. The Pivot Grid allows you to see how well each salesperson performed, which cities generate the most revenue, how products perform between cities, etc.

http://examples.sencha.com/extjs/6.0.0/examples/kitchensink/#pivot-grids

To try out the pivot grid, best way, is by using an existing Ext JS 6 application, previously generated by Sencha Cmd.

  1. Unzip the ext-addons-6.x.zip
  2. Copy the packages folders, over to an existing ext js 6 project, the packages folder. For example:
  1. <myapp>/packages/
  1. Open app.json, add “pivot” to the requires array.

    "requires": [

        "pivot"

    ],

For more information, check out this guide:

http://docs.sencha.com/extjs/6.0/components/grids/pivot_grid.html

Web Server

Sencha Cmd has a built in webserver (Jetty 8.1.7). You will start the web server automatically every time you run the following command from the commandline:

sencha app watch

By default it takes the port 1841, in case the port is already in use, it takes a different port number. The log message will tell you which port to use.

For example:

http://localhost:1841

The location and name of the directory in which you create your directory varies by operating systems and web servers. If you choose to use your own local webserver, you will need to store your directory somewhere within your localhost’s web-accessible area.

Examples of this would be XAMPP’s htdocs directory or Linux’s /var/www/html.

The built-in webserver, is very basic. In case you do PHP development, you might use an Apache web server instead (XAMPP, MAMP). Java developers might prefer Tomcat. .net developers IIS. You can use any web server of preference, for Sencha projects. As long as you can serve web and JSON files. Enabling the full directory listing might be handy too.

Serving JSON files for IIS

If you are running an IIS web server, make sure to add application/x-json as a MIME type. IIS requires a MIME type setup to properly serve JSON files. If this is not set up, JSON files will return an error when you preview your project.

See also:

Setting a System Variable

Let’s look into setting the system path variables on the various operating systems of note.

Windows

Windows XP

Windows Vista

Windows 7

Windows 8

Mac OSX / Linux

Edit ~/ .bash_profile

Modify PATH variable, write the following line, with the path to one of the tools:

export PATH=<PATH-TO-ADD-HERE>:$PATH

Save and close the file and open a new terminal window

Note: The .bash_profile is a hidden file. These sorts of files are hidden in Finder by default. To enable hidden files, run the following command from the command line:

defaults write com.apple.finder AppleShowAllFiles TRUE

killall Finder