Sencha Ext JS Ecosystem and your getting started first App

Ext JS is a pure JavaScript application framework for building interactive cross platform web applications using techniques such as Ajax, DHTML and DOM scripting.

sencha_codementor_officehour

UI

If you tend to work with ExtJS Version 4 and above, you would be perplex with the tools its refers,  Sencha Cmd, Architect and other terminology which it comes with. Let me demystify the Ecosystem.

ExtJS ecosystem consists of

  • ExtJS JavaScript Framework
  • ExtJS Command
  • ExtJS Architect

ExtJSEcosystem
In order to work with Ext JS, there are two things needed

ExtJS Cmd

ExtJS is the utility which allow you to do various functions for ExtJS working, build and Optimization. Example, you can use ExtJS to create the Workspace and Sample App

Ext JS Framework Resource

There are two version ablv, full commercial and GPL version. Below links are for GPL license
GPL Version Download: https://www.sencha.com/legal/gpl/
GPL Faq: https://www.sencha.com/legal/open-source-faq/
License Version: https://www.sencha.com/products/extjs/evaluate/
ExtJS Cmd Download link
https://www.sencha.com/products/sencha-cmd/
Note: When you download, download the same version of cmd and framework
Example, if framework is 6.1.x, Cmd should be 6.1.x

In you use License Version, you will get the watermark of trial on screens which you developed until you enter the license key.

Sencha Architect

Sencha Architect is the desktop app which let’s you visual build the app. It has toolbox where you can drag and drop items, and it generates the code behind which gives you the UI. Great tools for RAD UI development. But, it doesn’t complete the app development. Binding code, logic, etc is what you need to write. Plus, Sencha Architect come is separate license, then add to your development cost.

In general development workflow, you would be mostly working with ExtJS framework and command line tool.You won’t be needing architect so often.

Getting start with first app

In order to start with Sencha ExtJS 6.x, follow the steps below

Step 1

Download the ExtJS JS SDK from the Website
Links are above, in resource section. It is also know as Secha Pack
Similar Download ExtJS Command, links above in resource section
Ext JS framework Size: ~ 165 MB
ExtJS Cmd: ~45 MB (Without JRE)

Step 2

Install the ExtJS Command
ExtJS Command for Windows comes in installable format. Just run the installer

Once you have install sencha cmd, you will get Sencha in the cmd prompt.

Source: https://www.youtube.com/watch?v=zgzdn7gylWM

Step 3

Create the Workspace for the ExtJS
Command: sencha generate workspace {path where workspace needs to be generated}
This would copy all the necessary files to the workspace. It takes few minutes to build the workspace
Here, below is the screen shot of the workspace

Workspace

Here, you see, it has copied various folder where, ext is the main folder where all file resides to create the first ExtJS app.
Packages would contain the theming and other stuff will reside
Workspace.json is the metadata file for the workspace

Step 4

Creating the First Demo App for Sencha
Command: sencha generate app {NameOfApp} {path where you like DemoApp to be present}
This command execute this command from the ext folder
e.g. D:\Prj\Sencha_Workspace\ext: sencha generate app DemoApp ..\DemoApp
This will create directory “DemoApp” in the Sencha_Workspace, and add all necessary files in this folder

Step 5

Build the app. Go to the DemoApp folder, which you create above and fire following command
Command: sencha build app {mode}
Here, there are two modes of building in the app in version 6.x, Classic and Modern
e.g. D:\Prj\Sencha_Workspace\DemoApp sencha build app Classic
OR
e.g. D:\Prj\Sencha_Workspace\DemoApp sencha build app Mordern

What it does, it will compile the project and put necessary files in classic and modern folder in DemoApp.
Prior to ExtJS 6, there were two framework, Sencha ExtJS and Touch. Now, in 6.x they have merge this two framework into one. When you build with Classic, it builds the application in the way it use to build for ExtJS version 4 and 5. Modern builds in new way and UI have the feature of Touch

ClassicAndModern

Step 6

To run the application, you need run following command
Command: sencha app watch {mode}
e.g. sencha app watch classic
What it will do, it will start the Ruby server at port 1841, which is the default port, if you didn’t change in config. Open the browser, and paste in the following URL
http://localhost:1841/ and your app would be running

Advertisements

2 thoughts on “Sencha Ext JS Ecosystem and your getting started first App

  1. Pingback: Understanding Sencha Cmd | Technical Insanity

  2. Pingback: Deep Dive into Sencha ExtJS Build | Technical Insanity

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s