A Step-by-Step Guide To An Extjs Tutorial For Beginners

Ext JS tutorial for beginners

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.

File Description
ext-all.js There are no comments in this file because it contains the detruncate code.
ext.js The application’s base file contains all of the application’s functionalities.
ext-all-dev.js It’s also a development-related detruncate file. It includes comments and console logs, which aid in error detection.
ext-all-debug.js This file is used for debugging.
ext-all.js This file is for development purposes only.


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-’ folder.

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

Desktop application – required to use classic theme and it can be found under ‘ ext- ext-’ 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,

Name Convention
Class Starts with an uppercase, followed by camel case (StudentClass)
Method Starts with lowercase, follower by camel case (doWrite())
Variable Starts with lowercase, follower by camel case (studentName)
Constant Uppercase only (VALUE)
Property Starts with lowercase, follower by camel case


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” />








In here,

  • Ext.onReady() method – When Ext JS is set to render Ext JS elements, this method is invoked.
  • Ext.create() – creates an object
  • Ext.Panel – predefined class to create a panel. It also has the following properties such as 
    • renderTo – panel in which this is rendered
    • Height and width properties
    • Title
    • Html – html content to be shown
  1. Open the standard browser and the following is shown.

How to create classes?

Ext itself provides more than 300 classes. However new classes are defined using Ext.define(class name, class members/properties, callback function);

Here is an example of that.

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'


Creating Objects

There are mainly two ways to create objects. The first method is using the new keyword.

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

Second method is using the Using Ext.create()

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


Again, there are two methods to achieve inheritance. The first one is using the Ext.extend method. 

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

Here the essential functionalities of Ext JS class GridPanel are used by our custom class StudentDetailsGrid.

The second method is using Mixins

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

The controller is where we define all of the other classes, including store, view, and so on. We can now utilize the DepartmentUtils class in the controller or this application by calling it and using its functions.

What is Sencha CMD?

Sencha CMD is indeed a cross-platform CLI tool that automates a variety of actions throughout the lifecycle of your apps, from creating new projects to delivering them to production. you can download the Sencha CMD from this link


What is Sencha Themer?

Sencha Themer gives you the ability to design Ext JS, ExtAngular, and ExtReact applications using a GUI instead of writing codes. To establish good styles and develop theme bundles with dynamic stylesheets, Themer offers you access to inspection tools and components as well. 


What are sencha examples?

Ext JS provides the most extensive list of high-performance, configurable UI widgets in the business. Ext JS makes use of HTML5 features in popular browsers while keeping legacy browsers compatible and usable. You can find some useful Examples to create cross-platform applications for desktops, smartphones, and tablets here.  

Are you ready to experience the power of Ext JS?

In this article, we have provided you with a step-by-step guide to an ExtJs tutorial for beginners. You can see how simple it is to set up an application with Ext JS and Sencha Cmd. Sencha Ext JS has a free trial offered, so go check it out and start off with one of the best javascript libraries now! Watch out for our next article to dive deep on Sencha Ext Js.

Get started with one of the best Javascript libraries today.