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. |
(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
<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
No comments:
Post a Comment