Google Choice: Ext.js - Environment Setup

Friday, February 17, 2017

Ext.js - Environment Setup

Try it Option Online
We have set up ExtJS Programming environment online, so that you can compile and execute all the available examples online. It gives you confidence in what you are reading and enables you to verify the programs with different options. Feel free to modify any example and execute it online.

Try the following example using Try it option available at the top right corner of the below sample code box:
<!DOCTYPE html>
<html>
   <head>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type="text/javascript">
         Ext.onReady(function() {
         Ext.create('Ext.Panel', {
            renderTo: 'helloWorldPanel',
            height: 100,
            width: 200,
            title: 'Hello world',
            html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   <body>
      <div id="helloWorldPanel"></div>
   </body>
</html>
For most of the examples given in this tutorial, you will find a Try it option in our website code sections at the top right corner that will take you to the online compiler. So just make use of it and enjoy your learning.

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 a 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 following files:
(1) Javascript Files JS file which you can find under folder \ext-6.0.1-trial\ext-6.0.1\build are :

File and Description
ext.js This is the core file which contains all functionality to run the application.
ext-all.js This file contains all the code minified with no comments in the file
ext-all-debug.js This is the unminified version of ext-all.js for debugging purpose.
ext-all-dev.js This file is also unminified and is used for development purpose as it contains all the comments and console logs also to check any errors/issue
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 give direct path where the file reside in your system.
(2) CSS Files There are number of theme based files which you can find under folder \ext-6.0.1-trial\ext-6.0.1\build\classic\theme-classic\resources\theme-classic-all.css

If we are going to use desktop application then we 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 we will use modern themes which can be found under folder \ext-6.0.1-trial\ext-6.0.1\build\modern

These library files will be added in an Ext JS application as follows:

<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 and to write your Ext JS programs, you will need a text editor. There are even multiple IDEs available in the market. But for now, you can consider one of the following:

Notepad: On Windows machine you can use any simple text editor like Notepad (Recommended for this tutorial), Notepad++, sublime.
Eclipse: is an IDE developed by the eclipse open-source community and can be downloaded from http://www.eclipse.org/ .

Browser

Ext JS supports cross browser compatibility, it supports all major browsers 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.

পৃষ্ঠাসমূহ

Labels

.

Search Your Article

Total Pageviews