Sencha Cmd, how to setup an Ext JS app based on Neptune theme

In this article I will show how to setup an Ext JS app with Sencha Cmd (version 4.0.1.30) 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.

Windows 8.1

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 (4.0.1.45) didn’t produce any output.

If you had previously 4.0.1.30 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/4.0.1.30/.

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: //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.

Install Ext JS from: //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).

Steps

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).

Related posts:

Dedicated to professional software development since 1985. Has worked since 1992 as IT manager in several international operating companies. Since 2007 CEO and Sencha Ext JS web application developer at Enovision GmbH.