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/
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/
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:
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. 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
Based on: Ultimate Setup Guide - Lee Boonstra 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.
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: • How to allow download of .json file with ASP.NET • Configure MIME Types for IIS 6.0 • Get IIS6 to serve JSON files for Inc. POST,GET
Based on: Ultimate Setup Guide - Lee Boonstra NodeJS
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world. We use this package manager to install or Phonegap/Cordova dependencies. For more information visit: https://nodejs.org/en/
You can install NodeJS from downloading the installer on their website. Choose the installer that belongs to your operating system: https://nodejs.org/en/download/ Phonegap/Cordova
Application build with the Sencha framework are considered to be web applications. In order to install these applications on a smartphone or tablet (creating a hybrid application), we need to package them first into a native shell. For this we need a web- to-native wrapper like Phonegap or Cordova. Sencha CMD has build in support to work with these two packaging system (which are essentially the same). For more information on Sencha + Phonegap/Cordova visit the docs at: http://docs.sencha.com/cmd/6.x/cordova_phonegap.html
We install Phonegap through nodeJS’s package manager npm by issuing the following command in terminal or windows powershell:
>npm install –g phonegap or >npm install –g cordova
The ‘-g’ option ensures that the package is installed globally.
Check your installation by issuing the following command in a terminal window or powershell window in Windows:
>phonegap –v 5.0.0-0.28.0 or >cordova –v 5.1.1
It may be necessary to add both phonegap or cordova to your PATH in order to use the command line utility. The following location should be added to your PATH if the above generates an error:
Windows
/Users/appData/roaming/npm/npm_modules
Based on: Ultimate Setup Guide - Lee Boonstra Android SDK Tools for Android build
Cordova and Phonegap (local build) make use of the Android SDK tools for creating a native package of your Sencha application. We therefore have to install the android SDK tools and add the to our environment PATH. Start by downloading the SDK tools from their website: https://developer.android.com/sdk/index.html
Once installed, you can add both the platform-tools and tools to your PATH.
MAC export ANDROID_HOME=/
Linux export ANDROID_HOME=/
Windows set ANDROID_HOME=C:\
Check your installation by executing the following command in a terminal window or powershell window:
>android GapDebug
Remote debugging a Phonegap/Cordova application can be done with several tools: weinre, Google remote inspection and Gapdebug. Here we explain the setup of Gapdebug for debugging our installed applications. Visit their website for more information: https://www.genuitec.com/products/gapdebug/
You can install GapDebug using their installer for each platform at: https://www.genuitec.com/products/gapdebug/download/
(only for Windows or Mac)
Based on: Ultimate Setup Guide - Lee Boonstra Setting a System Variable
Let’s look into setting the system path variables on the various operating systems of note. Windows
Windows XP
• Start -> Control Panel -> System -> Advanced • Click on Environment Variables, under System Variables, find PATH, and click on it. • In the Edit windows, modify PATH by adding the location of the class to the value for PATH. If you do not have the item PATH, you may select to add a new variable and add PATH as the name and location of the class as the value. • Close the window and reopen the command prompt window.
Windows Vista
• Right click My Computer icon • Choose Properties from the context menu • Click Advanced tab (Advanced system settings link in Vista) • In the Edit windows, modify PATH by adding the location of the class to the value for PATH. If you do not have the item PATH, you may select to add a new variable and add PATH as the name and location of the class as the value. • Close the window and reopen the command prompt window.
Windows 7
• Select Computer from the Start menu • Choose System Properties from the context menu • Click Advanced system settings > Advanced tab • Click on Environment Variables, under System Variables, find PATH, and click on it. • In the Edit windows, modify PATH by adding the location of the class to the value for PATH. If you do not have the item PATH, you may select to add a new variable and add PATH as the name and location of the class as the value. • Close the window and reopen the command prompt window.
Windows 8
• Drag the Mouse pointer to the Right bottom corner of the screen • Click on the Search icon and type: Control Panel • Click on Control Panel > System > Advanced • Click on Environment Variables, under System Variables, find PATH, and click on it.
Based on: Ultimate Setup Guide - Lee Boonstra • In the Edit windows, modify PATH by adding the location of the class to the value for PATH. If you do not have the item PATH, you may select to add a new variable and add PATH as the name and location of the class as the value. • Close the window and reopen the command prompt window. Mac OSX / Linux
Edit ~/ .bash_profile Modify PATH variable, write the following line, with the path to one of the tools: export 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
Based on: Ultimate Setup Guide - Lee Boonstra