In this article I will show how to setup an Ext JS app with Sencha Cmd (version 18.104.22.168) and a custom theme based on the Ext JS neptune theme. I have followed the Sencha Ext JS 4.2.2 Theming from the Sencha website and to make things a bit easier I have summed it up in a few easy steps.
I am not using a workspace and generate the app directly. The name of the app we are setting up is called MopedCollection (what’s in a name).
The names MopedCollection and moped-collection-theme have to be modified to your own needs.
The following steps assume a PC/laptop with Windows 8.1 installed. And notice is demanded about the fact that apps generated with different Sencha Cmd versions are not compatible! You can upgrade an app to a higher version of Sencha Cmd, but you can’t influence it with an older version. It is recommended to always have the latest version installed, but on Windows 8.1 the latest version of Sencha Cmd (22.214.171.124) didn’t produce any output.
If you had previously 126.96.36.199 installed and you would like to go back after an upgrade, you can try:
Enter: sencha upgrade -b -b
Surprisingly it reinstalled a beta release from cdn.sencha.com/cmd/beta/188.8.131.52/.
When this succeeds you have to modify the system values in Windows. You can do this by going to System in the control panel and click on Advanced System Settings. Then click on the button Environment Variables. In the System Variables change the value of Path and SENCHA_CMD_3_0_0 to the right version of Sencha Cmd. Close any open DOS command dialogs and reopen them again to load the modified system variables.
Sencha watch limitations
Sencha Cmd folder "watch" does also not work on a Samba shared folder on a Linux server. This could be installed in f.e. VMWare Workstation/Player. The Sencha app watch" command will end in a The network BIOS command limit has been reached error. You can watch this folder on the VMWare installed Linux server, but it requires that you have the same Sencha Cmd version installed as on your Windows PC.
But not with Debian Wheezy
With Debian Wheezy it didn’t work, because it resolved in Java runtime errors. This is possibly because of the fact that Debian has an OpenJDK (free Java license) and has banned the Oracle JDK from its distribution.
Alternatively you could install a local Xampp Apache on your PC where you have local access with your Windows PC to the www publication folder. The internal phantomjs web server that comes with Sencha Cmd is a very lightweight web server for testing Sencha build apps.
To test your app locally with the phantomjs internal web server.
Enter: sencha web start or sencha web –port <port> start
Start the web server in the root of your project (f.e: c:<mydir>MopedCollection). As in the path that has the generated app you are going to create in the following steps.
To open 2 Dos command dialogs at the same time, you can run one as normal and one as administrator.
You can then access your app from the web browser wit url: http://localhost:<port>.
The web server is automatically stopped when the DOS command dialog is closed. Closing the web server with the command sencha web stop leads to a connection refused error.
Requirements for using Sencha Cmd
- Install Ruby for Window from: http://rubyinstaller.org/downloads/ and install the latest version.
- Install Sencha Cmd from: http://www.sencha.com/products/sencha-cmd/download. I have version 184.108.40.206, for version 220.127.116.11 didn’t show any feedback in my DOS prompt.
- Install Ext JS from: http://www.sencha.com/products/extjs/download/ and it is helpful to unzip it in the root of your c: drive. This avoids some typing when entering the Sencha CMD statements. (like Ext-4.2.2).
- Make sure to have the proper JAVA SDK installed:
Type "java -version" from the DOS prompt to check this.
java version "1.7.0_45"
Java(TM) SE Runtime Environment (build 1.7.0_45-b18)
Java HotSpot(TM) 64-Bit Server VM (build 24.45-b08, mixed mode)
Download it from here: http://java.com/en/download/index.jsp
Go to the root of the folder where you want to put the app. This doesn’t have to be on the same drive where you have installed Sencha CMD. Don’t create the app folder by hand, CMD will do this for you. (like cd inetpubwww or e: <enter> cdSenchaApps).
Enter: sencha -sdk <path-to-your-ext> generate app MopedCollection MopedCollection
- <path-to-your-ext> = f.e. c:Ext-4.2.2
- First MopedCollection = name of your app
- Second MopedCollection = path to your app
In this sample, if you are in c:mydir. It will be installed as c:mydirMopedCollection.
Enter: sencha generate theme moped-collection-theme
Extending the Neptune theme
For this tutorial we will create a custom theme that extends the Neptune theme.
To do this, replace the following line in "packagesmoped-collection-themepackage.json":
Configuring Global Theme Variables
Now that you have set up your theme package, its time to begin modifying the
visual appearance of the theme. Let’s start by modify the base color from which
many Ext JS Components’ colors are derived.
Create a file called Component.scss in "moped-collection-themesassvar". Add the following code to the Component.scss file:
Don’t reload your app yet in your browser, cause nothing has changed yet
Enter: sencha package build
Edit the sencha.cfg file:
Enter: sencha ant clean
Enter: sencha app build
Reloading the app in a browser will show all the changes with the new theme
Sencha watch, watching the file system
Enter: sencha app watch
To efficiently maintain all of the information, Sencha leverages Java 7’s ability to monitor the file system for changes. Based on this functionality, app watch monitors the following things:
- Application source code (the “app” folder).
- Application Sass code (the “sass” folder).
- Application resources (the “resources” folder).
- Theme package source, Sass and resources (“src”, “sass” and “resources”).
- The source, Sass and resources folder for the theme’s base themes.
- The source, Sass and resources of all packages required by the application (in “app.json”).
- The source, Sass and resources of all packages required by other packages (in “package.json”) including theme packages.
Sencha watch can be used to monitor your app directory for modifications and have Sencha CMD do the work while you develop the app in your editor. You can read more about it here: http://www.sencha.com/blog/using-the-new-app-watch-command-in-sencha-cmd-4.