Ext JS 6 - The complete installation guide (applicable for Sencha Touch) 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: • Java Runtime Environment (JRE) • Sencha Cmd 6 • Ext JS 6 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 • Ruby, Sass & Compass • Web Server • Sencha JetBrains IDE plugin • App Templates • Sencha App Inspector • Ext JS 6 Pivot grid • NodeJS • Phonegap/Cordova • Android SDK Tools for Android build • GapDebug remote inspector 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. Based on: Ultimate Setup Guide - Lee Boonstra 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. Based on: Ultimate Setup Guide - Lee Boonstra 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 Based on: Ultimate Setup Guide - Lee Boonstra 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 or Sencha Touch 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 Based on: Ultimate Setup Guide - Lee Boonstra 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: • IntelliJ 14.1+ • WebStorm 10+ • PHPStorm 9+ • RubyMine 7.1+ • PyCharm 4.5+ 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. Based on: Ultimate Setup Guide - Lee Boonstra 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 The Pivot Grid component enables rapid summarization of large sets of data.