Ext .js environment settings

May 09, 2021 Extjs

Try the online option

We've set up the ExtJS programming environment online so that you can compile and execute all available examples online. /b10> It gives you confidence that you are reading and enables you to use different options to validate the program. /b11> Feel free to modify any examples and execute them online.

Try the following example:

<!DOCTYPE html>
<html>
   <head>
      <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
      <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></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>

Local environment settings

This section will show you how to download and set up Ext JS on your machine. /b10> Follow the steps to set up your environment.

Downloading library files

Download a https://www.sencha.com version of the Ext JS library file from the Sencha library file. You will get a trial version from the website on your registered email ID, which will be a compressed folder called ext-6.0.1-trial.

Unzip the folder and you will find various JavaScript and CSS files that you will include in our app. This mainly includes the following files:

The (1) Javascript file JS file that you can find under the folder s ext-6.0.1-trial-trial-ext-6.0.1 is:

Files and descriptions
ext.js This is the core file, which contains all the features that run the application.
ext-all.js This file contains all the reduced code that is not commented on in the file
ext-all-debug.js This is an unrated version .js the ext-all system for debugging purposes.
ext-all-dev.js This file is also not graded for development purposes because it contains all comments and console logs to check for any errors/issues
ext-all.js This file is used for production purposes, mainly because it is much smaller than any other.

You can add these files to your project JS folder, or you can give a direct path for the files to reside in the system.

(2) CSS files There are several theme-based files that you can use in folders . .css

If we're going to use a desktop application, then we can use the classic theme under the folder . ext-6.0.1-trial .
If we're going to use a mobile app, then we're going to use a modern theme, which can be found in the folder

These library files are added to the Ext JS application as follows:

<html>
   <head>
      <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
      <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
      <script type ="text/javascript" src = "app.js" > </script> 
   </head>
</html>

You'll .js the ExtJS application code in the app and file.

CDN settings

CDN is a content delivery network where you don't need to download the Ext JS library file, and you can add extJS CDN links directly to your program, as follows:

<html>
   <head>
      <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
      <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
      <script type ="text/javascript" src = "app.js" > </script> 
   </head>
</html>

Top editors

Because it is a JavaScript framework for developing Web applications, in our project we will have HTML, JS files and write your Ext JS program and you will need a text editor. T here are even multiple IDEs available on the market. But for now, consider one of the following:

Note book: On Windows machines, you can use any simple text editor, such as note book (recommended for this tutorial), note book, sublime.

Eclipse: An IDE developed by the Eclipse open source community that can be obtained from

http://www.eclipse.org/

Download.

Browser

Ext JS supports cross-browser compatibility and supports all major browsers:

IE 6 and above

Firefox 3.6 and later

Chrome 10 and later

Safari 4 and above

Opera 11 and above

You can run the Ext JS application using any browser.