Switch Sencha Cmd Versions Any Time.

Sencha npm Tooling With Ext JS 6.6

Sencha tooling with npm has been announced for Ext JS 6.6.

This is awesome news!  This post is partly news item and partly tutorial.  As of June 4, 2018, Sencha made an early version of their new tooling available to their MVPs.  As a member of that group, I wanted to share some state-of-the-moment news and information for the new npm based Sencha tooling.

To learn about the Sencha MVP program and to become an MVP yourself, checkout this link: Sencha MVP Program.

Ext JS 6.6 is on the horizon and with the new release comes node packaging and node tooling to build your application.   See this link for a detailed discussion: Top Considerations for Web Development in a Free Open Source World.

This is super exciting because the same npm based build concepts in use with React, Angular and other frameworks are now in beta for Ext JS Modern and Classic.  Hooray!!  This breaks us out of the Sencha Cmd silo and makes Ext JS feel a lot more open.

To begin, make sure npm is current on your system. with npm -v 

Determine the the version of node and npm currently available here.

Get npm here if you don’t have it.

Your Sencha forum user id and password is required to get access – but first you must be a member of the Sencha MVP Program.

When prompted for user id, use your sencha support id, but replace the (at sign) @ sign in your email address with (two dots) ..

example: myemail..gmail.com

You will be asked for you Sencha forum password

You will be asked for your email address, this is your Sencha support forum email address.  Same as above but with the @ sign, not the dots

// login here!
npm login --registry=http://test.npm.sencha.com --scope=@sencha
// then install from here
npm install -g @sencha/ext-gen

Depending on your setup, for mac or linux, you may need to run with sudo.

The above screenshot shows what you will see after a successful installation.

Below, is an easier to read and copyable version of the screenshot above.

Welcome to Sencha ExtGen v0.0.191 - The Ext JS code generator
Quick Start:
ext-gen app MyAppName
ext-gen app -i
Examples:
ext-gen app --auto --template universalclassicmodern --classictheme theme-triton --moderntheme theme-material --name CoolUniversalApp
ext-gen app --auto --template classicdesktop --classictheme theme-triton --name CoolDesktopApp
ext-gen app --interactive
ext-gen app -a --classictheme theme-graphite -n ClassicApp
ext-gen app -a -t moderndesktop -n ModernApp
Run ext-gen --help to see all options

I conducted some tests based on the above examples and they were all successful.   They all built successfully and ran as expected.  The -i or –interactive options prompt for the template type but does not (yet?) prompt for the theme.

Below is the output from the ext-gen –help with some color coding to draw your attention to the current list of templates and themes.  Think of templates as the type of app you are wanting to create:  classicdesktop, moderndesktop, universalclassicmodern, universalmodern – see the template descriptions in red below for more details.

Themes are out-of-the box ways to effect and control the look of the app.  Here is a list of the stock themes available in Ext JS 6.5.3 (not sure if this is the same list that will be available for Ext JS 6.6 or not).  There is a lot to say about themes, creating custom themes and so forth that are beyond the scope of this article but I’m sure Sencha will move this forward the way they always have.

Sencha ExtGen v0.0.191 – The Ext JS code generator

Quick Start: ext-gen -a

ext-gen app (-h) (-d) (-i) (-t ‘template’) (-m ‘moderntheme’) (-c ‘classictheme’) (-n ‘name’) (-f ‘folder’)

-h –help show help (no parameters also shows help)-d –defaults show defaults for package.json-i –interactive run in interactive mode (question prompts will display)-t –template name for Ext JS template used for generate-c –classictheme theme name for Ext JS classic toolkit-m –moderntheme theme name for Ext JS modern toolkit-n –name name for Ext JS generated app-f –folder folder name for Ext JS application (not implemented yet)-v –verbose verbose npm messages (for problems only)

Examples:ext-gen app –template universalclassicmodern –classictheme theme-graphite –moderntheme theme-material –name CoolUniversalAppext-gen app–template classicdesktop –classictheme theme-graphite –name CoolDesktopAppext-gen app –interactiveext-gen app -a —classictheme theme-graphite -n ClassicAppext-gen app -a -t moderndesktop -n ModernApp

Templates:You can select from 4 Ext JS templates provided by Sencha ExtGen

classicdesktop (default)This template is the default template in ext-gen. It contains 1 profile, configured to use the classic toolkit of Ext JS for a desktop application

moderndesktopThis template is similar to the classicdesktop template. It contains 1 profile, configured to use the modern toolkit of Ext JS for a desktop application

universalclassicmodernThis template contains 2 profiles, 1 for desktop (using the classic toolkit), and 1 for mobile (using the modern toolkit)

universalmodernThis template contains 2 profiles, 1 for desktop and 1 for mobile. Both profiles use the modern toolkit.

Theme Names:classic themes: theme-classic, theme-neptune, theme-neptune-touch, theme-crisp, theme-crisp-touch theme-triton, theme-graphitemodern themes: theme-material, theme-ios, theme-neptune, theme-triton 

And finally, here are the npm commands I used to build for testing and production the way Sencha Cmd has historically done.

cd into the app folder and execute the appropriate build command.

npm run build-desktop-testing
npm run build-desktop-production
npm run build-phone-testing
npm run build-phone-production

This is a brief state-of-the moment look at npm for Ext JS.  I’m excited to see what comes next and I will continue to provide updates as things move along.

To review Sencha Cmd for Ext JS 6.5.3 (pre npm and pre ExtJS 6.6), take a look at the article I did on Ext JS – Create Workspace and/or Classic or Modern or Universal App in 5 minutes

Check out Pinch Hitter Solutions at phs4j.com.  
Check out Scott's youtube channel at Motivated Code Pro.

Ext JS – Calculate Duration Between Two Dates

Ext JS – How to calculate duration between two dates in typical intervals such as years, months, days, hours, minutes or seconds.

The results for the first set of dates,
dt_1 = ‘2018-06-11 03:10:14 AM’
dt_2 = ‘2018-06-11 11:17:23 PM’

The results for the first set of dates,
dt_1 = ‘2018-06-11 03:10:14 AM’
dt_2 = ‘2018-06-11 11:17:23 PM’

0 Years
0 Months
0 Days
20 Hours
1207 Minutes
72429 Seconds

The results for the second set of dates,
dt_1 = ‘2017-06-11 03:10:14 AM’
dt_2 = ‘2018-06-19 11:17:23 PM’

1 Years
12 Months
373 Days
8972 Hours
538327 Minutes
32299629 Seconds

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: