Tag Archives: ExtJS

Understanding Sencha Cmd

If you are coming from other JavaScript framework like AngularJS, you would be perplex with the Sencha Cmd when developing with ExtJS.

If your are new to ExtJS, I would recommend you to check my previous blog about Sencha ExtJS.

What is Sencha Cmd

SenchaCMD

Sencha Cmd is a cross-platform command line tool that provides many automated tasks around the full life-cycle of your applications from generating a new project to deploying an application to production.

You can read more about Sencha Cmd here

https://docs.sencha.com/cmd/5.x/intro_to_cmd.html

What does Cmd do?

Cmd perform serveral function. Here are few listed below, there are more, you can refer above link above
  • Code Generation Tools
    Create apps, controller, models, etc. with cmd
  • Web Server
    Starts the build-in server to view app, instead of depending of external webserver like Apache2, IIS. It generally, [ sencha app watch ] command
  • Build Scripts
    This is most import task in development lifecycle. [ sencha app build {enviroment} ] is one which each Sencha Developers lives by.
  • Logging

What are the software dependencies?

Java Runtime Environment (JRE)
Cmd to produce a valid build, so it’s necessary to have Java installed properly. Sencha Architect requires the JRE to properly utilize Sencha Cmd.

Ruby
Sencha Architect may use Ruby during the app build process when building a theme. Theming in Sencha frameworks may require Sass and Compass depending on the Cmd version used. You don’t need to install these two dependencies since they ship with the versions of Sencha Cmd and Sencha Architect as necessary. However, Sass and Compass run on top of Ruby, so it does need to be specifically installed when using versions of Cmd older than 6.x.

Tools required to install CMD

Sencha Command required tools
• Ruby: http://www.ruby-lang.org/en/downloads/
• Sass: http://sass-lang.com/
• Compass: http://compass-style.org/
• Java JDK (Java 7 or later): http://www.oracle.com/technetwork/jav…
• Java environment variables: http://docs.oracle.com/javase/tutoria…
• Apache Ant: http://ant.apache.org/bindownload.cgi

https://www.youtube.com/results?search_query=extjs+5+installation

Troubleshooting the CMD

I will create the separate post to trouble shoot the Sencha CMD part.

 

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