ExtJS stands for Extended Javascript and it is a Javascript framework built based on the Yahoo User Interface(YUI).  It’s a standalone application development framework with a sophisticated user interface. This article is an Extjs Tutorial For Beginners that will help you to get started with the framework.

How to download and set up Ext JS?

1. Using your registered email address, download the Ext JS trial version using this link. 

2. Download the Zip folder and Unzip it and you will get CSS and Javascript files. After unpacking the folder, you must double-click the.exe file to begin the installer.

3. Go through the installer wizard to complete the installation process. The following CSS and Javascript files are included in the library.

You’ll also find the relevant theme-based files in the unzipped folder, which you’ll need to include with the application. These files can be found under the ‘ext7.2.0.84-windowsext-7.2.0.84buildclassictheme-classicresourcestheme-classic-all.css’ folder.

Mobile application – required to use a modern theme and it can be found under ‘ext-7.2.0.84 ext-7.2.0.84buildmodern’ folder.

Desktop application – required to use classic theme and it can be found under ‘ ext-7.2.0.84 ext-7.2.0.84buildclassic’ folder.

You can include the CSS files listed below in your Ext JS application. Also, you can alternatively save the Ext Js application’s code inside a file called app.js as given below.

Can I use Ext JS through a CDN?

You can use Ext JS through a CDN without downloading the files to your computer. You can do it with the following code.

         href = “https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css” / >

What browsers are supported to run Ext JS applications?

Ext JS is cross-browser compatible and it works with all browsers mentioned below. 

• Chrome
• Safari
• Firefox
• Opera
• Internet Explorer

What are the naming conventions followed in Ext JS?

Ext JS uses the normal JavaScript naming system, which isn’t required but is a recommended practice to maintain. Some of the basics are given below,

What is the project structure and how does it works?

Ext JS follows MVC/ MVVM (Model View Controller / Model View Viewmodel) architecture. The image below shows the structure of a typical project.

 In the MVVM design, the ViewModel replaces the controller.

To understand how Ext JS works, suppose we use one model object in several places of the user interface. If we update the value in one location of the UI, we can notice the modification even without storing the values. The model’s value changes, and this is displayed in almost all of the UI’s locations in which the model is being used.

How to build our first program?

Let’s start off with a simple Hello World program. Create an index.html page as follows in the editor you prefer.

         rel = “stylesheet” />

Ext.define(employeeApp.view.EmployeeDeatilsGrid, {
   extend : 'Ext.grid.GridPanel',
   id : 'employeesDetailsGrid',
   store : 'EmployeesDetailsGridStore',
   renderTo : 'employeessDetailsRenderDiv',
   layout : 'fit',
   
   columns : [{
      text : 'Employee Name',
      dataIndex : 'employeeName'
   },{
      text : 'ID',
      dataIndex : 'employeeId'
   }]
});

var employeeObject = new employee();
employeeObject .getEmployeeName();

Ext.create('Ext.Panel', {
   renderTo : 'helloWorldPanel',
   height : 100,
   width : 100,
   title : 'Hello world',
   html : 'First Ext JS Hello World Program'		
});

Ext.define(student app.view.EmployeeDeatilsGrid, {
   extend : 'Ext.grid.GridPanel',
   ...
});

mixins: {
   commons: 'DepartmentApp.utils.DepartmentUtils'
},