Ext JS 6.6 and Open Tooling

In this article, we’ll walk through the following points for creating an Ext JS 6.6 application using open tooling:

  • Requirements
  • Getting Access to the Sencha NPM Repository
  • Creating and Building an Ext JS 6.6 Application
  • Starting the Server and Running the Application
  • Using Ext JS Packages in the Application
  • Using Third-Party Libraries in the Application

Requirements

Getting Access to the Sencha NPM Repository

  • If you have your support portal user id and password then you can use those, but make sure that your password has letters and numbers only. Due to some error in parsing characters, password with special characters isn’t working e.g. abra@dabra won’t get parsed. In such a case, please reset your support portal password first.
  • Alternatively, you can sign up for the evaluation copy of Ext JS. After filling the form you’ll get user id and password, which you can use for logging in to the registry.
  • You will be prompted for user id. Enter your user id, but replace the (at sign) “@” sign in your email address with (two dots) “..”. For example, replace “somemail@gmail.com” with “somemail..gmail.com“.
  • Next, you will be prompted for the password. Enter the password. Characters will not show, so don’t worry about that.
  • Lastly, you will be asked for your email id. Enter the one that you have given above without worrying about the dots. In this example, it will be “somemail@gmail.com”.

Creating and Building an Ext JS 6.6 Application

ExtGen:

  • classicdesktop — uses the classic toolkit to generate a desktop application. This is a default.
  • moderndesktop — uses the modern toolkit to create desktop application
  • universalclassicmodern — uses both toolkits to create 2 profiles — the classic toolkit for desktop profile and modern toolkit for phone profile
  • universalmodern — uses the only modern toolkit to generate 2 profiles — 1 for desktop and 1 for mobile
  • auto: This is the default mode. It generates a classic starter application using the classic toolkit and graphite theme but you can change this by passing certain flags. Here are a few examples:
  • interactive: This mode asks a couple of questions which allow you to modify the application defaults like, the application name, template, author name, etc.

ExtBuild:

Starting the Server and Running the Application

Adding Ext JS NPM Packages to Application

  • Run this command from the project root folder. It will download charts package from sencha npm repository and install it in “node_modules/@sencha folder”.
  • Edit “workspace.json” and append “dir” variable under “packages” with the path of the newly installed package.
  • Edit “app.json” to require the “charts” package.

Using 3rd Party Libraries in an Application

  • Download and install the Moment library
  • Add it’s path to “js: []” array of app.json

Summary

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
WalkingTree Technologies

WalkingTree Technologies

385 Followers

WalkingTree is an IT software and service provider recognized for its passion for technology.