Ext JS – Create Workspace, Classic, Modern, Universal App in 5 Mins

This tutorial has been tested with:

Ext JS 6.5.3 Commercial

Ext JS 6.2.0 GPL  –  If you are using the GPL version, replace ext-6.5.3.57 with ext-6.2.0 below.  

1 – Downloads

Download the current version of Sencha Cmd:
Download Sencha Cmd

Choose DOWNLOAD with JRE INCLUDED (unless you have a good reason not to)

Windows version works the same way, though 64bit provides only the JRE INCLUDED version.

If you don’t have a commercially licensed version of ExtJS, download the GPL version from here: Download GPL Version of Ext JS  then check your email for the ExtJS Download Link.

If you do have a commercial license and haven’t downloaded it yet, you can download the most recent sdk from here: Download Commercial Version of Ext JS

Be mindful that ExtJS versions change frequently so replace the versions mentioned above and below with the current versions available when you are using these instructions.

Unzip the ExtJS sdk (ext-6.5.3.zip) to a convenient location (remember this location, you will need it later) – Sencha does not include a formalized installation process, you just just need to unzip the sdk to the desired location.

I unzipped mine to ~/motivatedcodepro  – You can unzip yours to wherever it’s convenient for you.

Assuming you are using ~/motivatedcodepro as your unzip location you will end up with this:

~/motivatedcodepro/ext-6.5.3.57 

You DO NOT need to create folder ext-6.5.3.57 on your own, unzipping ext-6.5.3.zip will take care of that for you.

2 – Now that the sdk is installed, lets create a Sencha workspace:

Skip this step if you don’t want or need to use a workspace.

sencha -sdk ~/motivatedcodepro/ext-6.5.3.57/ generate workspace ~/motivatedcodepro/starterworkspace

We are telling sencha cmd that the sdk is located at ~/motivatedcodepro/ext-6.5.3.57/

And to generate the workspace at ~/motivatedcodepro/starterworkspace  (starterworkspace folder will be created automatically)

Once completed, the runtime framework will be installed in starterworkspace.  This allows your projects to share the sdk and other assets.

cd ~/motivatedcodepro/starterworkspace

3 – Next, lets generate some starter apps.

Note that all of the sencha generate app commands shown below will create a “starter app” for you to experiment with.  You can  runt this starter app from the browser at the end of these steps.

Create an ExtJS classic app in a workspace:

sencha generate app --ext classic classicapp classicappflr

We are telling sencha cmd to create an ExtJS classic app called classicapp in folder classicappflr within the ~/motivatedcodepro/starterworkspace folder.

Create an ExtJS classic app without a workspace:

sencha -sdk ~/motivatedcodepro/ext-6.5.3.57/ generate app –ext classic classicapp /your/chosen/folder/classicappflr

We are telling sencha cmd where the sdk is located and to create an ExtJS classic app called classicapp in folder /your/chosen/folder/classicappflr

Create an ExtJS modern app in a workspace:

sencha generate app --ext modern modernapp modernappflr

We are telling sencha cmd to create an ExtJS modern app called modernapp in folder modernappflr.

Create an ExtJS modern app without a workspace:

sencha -sdk ~/motivatedcodepro/ext-6.5.3.57/ generate app --ext modern modernapp /your/chosen/folder/modernappflr

We are telling sencha cmd where the sdk is located and to create an ExtJS modern app called modernapp in folder /your/chosen/folder/modernappflr.

Create an ExtJS universal app in a workspace:

sencha generate app --ext universalapp universalappflr

We are telling sencha cmd to create an ExtJS universal app called universalapp in folder universalappflr.

Create an ExtJS universal app without a workspace:

sencha -sdk ~/motivatedcodepro/ext-6.5.3.57/ generate app --ext universalapp /your/chosen/folder/universalappflr

We are telling sencha cmd where the sdk is located and to create an ExtJS universal app called universalapp in folder /your/chosen/folder/universalappflr.

4 – Now let’s test our installation:

To test any or all of these apps, cd into the appropriate folder and execute sencha app watch:

cd ~/motivatedcodepro/starterworkspace/modernappflr  (or /your/chosen/folder/ if you're not using a workspace)

sencha app watch

This will start the sencha cmd webserver and watch utility (a whole other subject) and will allow you to test your newly created apps.

Note that the server is running on port 1841

Point your browser to:

 http://localhost:1841/modernappflr

**Note that for non-workspace apps, you do not need to include the app folder in the url (modernappflr in this case).  The app folder is only needed when running in a workspace so sencha app watch will know which app to load from the workspace.

 

All done!  Here you should see the following:

About the Author Scott Salisbury

Scott is the creator of Motivated Code Pro and the Managing Partner of Pinch Hitter Solutions, Inc. Motivated Code Pro is devoted to helping developers build better software careers. Pinch Hitter Solutions (phs4j.com) is a consultancy focused on mobile app development and enterprise web work. Scott works primarily in Java and JavaScript and focuses on Spring and Ext JS.

Leave a Comment:

3 comments
Teri says March 11, 2018

Ok, so let’s say I think the app will be a one & only…but later I realize that I wish I would’ve created a workspace. Can I create one after the fact?

Reply
Teri says March 11, 2018

When would I not want a workspace? Just curious

Reply
    Scott Salisbury says March 11, 2018

    When you don’t care about sharing a copy of the ExtJS framework between apps. Workspace helps keep things organized and allows you to share the framework between your various apps.

    Reply
Add Your Reply