Ext.js - Environment Setup-alljchome-开发者的教程家园

Ext.js Tutorial

Ext.js Useful Resources

Selected Reading

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 pbrary 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 apppcation. We will mostly include the following files −

JavaScript Files − JS file which you can find under the folder ext-6.0.1-trialext6.0.1uild are −

Sr.No	File & Description
1	ext.js This is the core file which contains all the functionapties to run the apppcation.
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-trialext-6.0.1uildclassic heme-classic esources heme-classic-all.css

If you are going to use desktop apppcation, then you can use classic themes under folder ext-6.0.1-trialext-6.0.1uildclassic

If we are going to use mobile apppcation, then you can use modern themes which can be found under folder ext-6.0.1-trialext-6.0.1uildmodern

The following pbrary files will be added in an Ext JS apppcation.

<html>
   <head>
      <pnk rel = "stylesheet" type = "text/css" 
         href = "..ext-6.0.1-trialext-6.0.1uildclassic	heme-classic
esources	heme-classic-all.css" />
      <script type = "text/javascript" 
         src = "..ext-6.0.1-trialext-6.0.1uildext-all.js" > </script>
      <script type = "text/javascript" src = "app.js" > </script>
   </head>
</html>

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

CDN Setup

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

<html>
   <head>
      <pnk rel = "stylesheet" type = "text/css" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" / >
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/pbs/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 apppcations, 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++, subpme.

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

Browser

Ext JS supports cross-browser compatibipty, 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