Ext.js - Environment Setup

Local Environment Setup

This section guides you on how to download and set up Ext JS on your machine. Please follow the steps to set up the environment.

Downloading Library Files

Download the trial version of Ext JS library files from Sencha https://www.sencha.com. You will get the trial version from the site on your registered mail id, which will be a zipped folder named ext-6.0.1-trial.

Unzip the folder and you will find various JavaScript and CSS files, which you will include in our application. We will mostly include the following files −

JavaScript Files − JS file which you can find under the folder \ext-6.0.1-trial\ext6.0.1\build are −

Sr.No File & Description
1

ext.js

This is the core file which contains all the functionalities to run the application.
2

ext-all.js

This file contains all the code minified with no comments in the file.
3

ext-all-debug.js

This is the unminified version of ext-all.js for debugging purpose.
4

ext-all-dev.js

This file is also unminified and is used for development purpose as it contains all the comments and console logs to check any errors/issue.
5

ext-all.js

This file is used for production purpose mostly as it is much smaller than any other.

You can add these files to your projects JS folder or you can provide a direct path where the file resides in your system.

CSS Files − There are number of theme-based files, which you can find under folder \ext6.0.1-trial\ext-6.0.1\build\classic\theme-classic\resources\theme-classic-all.css

  • If you are going to use desktop application, then you can use classic themes under folder \ext-6.0.1-trial\ext-6.0.1\build\classic

  • If we are going to use mobile application, then you can use modern themes which can be found under folder \ext-6.0.1-trial\ext-6.0.1\build\modern

The following library files will be added in an Ext JS application.

<html>
   <head>
      <link rel = "stylesheet" type = "text/css" 
         href = "..\ext-6.0.1-trial\ext-6.0.1\build\classic\theme-classic\resources\theme-classic-all.css" />
      <script type = "text/javascript" 
         src = "..\ext-6.0.1-trial\ext-6.0.1\build\ext-all.js" > </script>
      <script type = "text/javascript" src = "app.js" > </script>
   </head>
</html>

You will keep ExtJS application code in app.js file.

CDN Setup

CDN is content delivery network with which you do not need to download the Ext JS library files, instead you can directly add CDN link for ExtJS to your program as follows −

<html>
   <head>
      <link rel = "stylesheet" type = "text/css" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" / >
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"> </script>
      <script type = "text/javascript" src = "app.js" > </script> 
   </head>
</html>

Popular Editors

As it is a JavaScript framework, which is used for developing web applications, in our project we will have HTML, JS files. To write our Ext JS programs, we will need a text editor. There are even multiple IDEs available in the market. But for now, we can consider one of the following −

  • Notepad − On Windows machine, you can use any simple text editor such as Notepad (Recommended for this tutorial), Notepad++, sublime.

  • Eclipse − It is an IDE developed by the eclipse open-source community and can be downloaded from https://www.eclipse.org/.

Browser

Ext JS supports cross-browser compatibility, it supports all major browsers such as −

  • IE 6 and above
  • Firefox 3.6 and above
  • Chrome10 and above
  • Safari 4 and above
  • Opera 11 and above

You can use any browser for running Ext JS application.

Advertisements