Ext JS Tutorial
What is Ext JS
Ext JS is widely used for creating the desktop application. It is compatible with all modern browsers such as Firefox, Chrome, Safari 6+, and Opera 12+. Ext JS includes built-in themes and UI components, which reduce the development time and boost productivity.
Features of Ext JS
Ext JS Versions
History of Ext JS
The history of Ext JS is shown below in the tabular form:
Tools for Ext JS
Here, some tools are given below provided by Sencha. These tools are used for application development in Ext JS.
Sencha IDE Plugins
Sencha IDE plugin accommodates the Sencha framework into WebStrome IDEs, IntelliJ, which helps the developer to increase productivity. It provides features such as code inspection, code completion, code generation, code integration, spelling checking, template creation, code refactoring, etc.
It is a tool that facilitates the developer with some features such as minification of the code, scaffolding, and production build generation.
It is a debugging tool that helps us to debug the code at the time of development.
Ext JS vs Angular JS
How to set up Ext JS environment
For working with Ext JS, you are required to set up a development environment. You need three essential things for Ext JS application development such as, Sencha SDK, IDE (Integrated Development Environment), and a Web server. In this section, we will guide you that how to download and set up the Ext JS environment on the machine.
Library files Downloading
Here, we will download the trial version of the Ext JS library files. You need to follow the below given steps to download the library file for Ext JS.
Step 1: You will download the trial version of Ext JS with your registered mail id. You can also use the following link https://www.sencha.com, and you will get the following snippet:
Step 2: Now, you will click on the Try It Free button shown in the above screenshot. After clicking on the button, you will get the following screen:
Step 3: After filling the required details, you need to click on Download Now, and your library files start downloading, as shown below:
Step 5: After unzipping the folder, you are required to click on the .exe file, and the installation process will be started, as shown in the below snippet:
Step 6: You need to click on the Next button, and you will get the following screenshot:
Step 7: Now, select the "I accept the agreement "and then click on the Next button, and you will get the following snippet:
Step 8: Now, you need to select the path to install Ext JS library files. By default, it will be installed in the C drive. You can also change the location by clicking on the Browse button and then click on the Next button.
Step 9: As shown in the above screenshot, you will be required to select the components which you want to install. After selecting the components, click on the Next button, and you will get the following screen:
Step 10: After the completion of the installation, click on Finish to complete the process.
In the unzipped folder, you will get the following files, which you need to include with the application.
In the unzipped folder, you will get the following theme-based files, which you need to include with the application. You will find these files under the \ext22.214.171.124-windows\ext-126.96.36.199\build\classic\theme-classic\resources\theme-classic-all.css folder.
You can add the below given CSS files in Ext JS application. You can also put the code of Ext Js application in a file named app.js.
CDN (Content Delivery Network) Setup
You can also provide a direct link of Content Delivery Network in the program to use the Ext JS without downloading the library files of Ext JS as shown in the below given code:
Text Editor Setup
Visual Studio Code
It is a source code editor introduced by Microsoft used for the Windows, Mac, and Linux operating systems. You can easily download it by clicking on the following given link:
Eclipse is an open-source Integrated Development Environment used to develop the applications. It includes the extensible plug-in and a base workspace system, which helps us to customize the development environment. You can download it by clicking on the below-given link:
It is a basic text-editing program used for Microsoft Windows. It helps the users to make documents. You can also use similar text-editors such as sublime, Notepad++.
Browser Set up for Ext Js
It can be referred to as a software application used for accessing the information on WWW (World Wide Web). The browser is used to display the necessary content on the screen according to the user's requirement.
Ext JS provides cross-browser compatibility. It can perform the functions across the different browsers.
You can execute the program codes of Ext JS on all major browsers. Here, we have listed some browsers below which support the Ext JS application:
Architecture of Ext JS
Ext JS supports MVC (Model View Controller) of version 4 and MVVM (Model view view-model) of version 5 architecture. This architecture is optional for the program codes, but it helps to make our code easy to establish and maintain.
Project Structure of Ext JS Application
It contains backend data objects mapping to view the dataIndex. It also consists of the objects that perform the store data binding to view. In the model.js, you can also obtain the data with the help of the store.
It is the main file that is responsible for starting the program flow. It should also involve the HTML file with <script> tag. App.js invokes the application controller for the remaining functions.
The View.js is responsible for the interface of the application, which is shown to the users. It also contains the rich UI (User Interface) views. These views can be customized and extended by the users according to their needs.
This file controls the Ext JS MVC architecture. It also contains the overall control of the applications, which includes event listeners and the code. The controller.js includes the path that determines all the other application files such as require, model, mixins, view, and store.
It stores the cache data, which will be provided to the view by using model objects. Store.js file fetches the data with the help of proxies. The proxies contain a path determined for fetching backend data service.
It helps to make our code clear, clean, easy, and readable. MVC (Model View Controller) doesn't support the utils.js. You can create the methods in Utils.js file and invoke them into the controller or in the view. It also allows reusing the code.
In the MVVM (Model View View-Model) architecture, you will use ViewModel instead of the controller.
The ViewModel works like a mediator between the changes of model and view. ViewModel wraps the model to view. ViewModel doesn't have any direct interaction with the view.
Components of Ext JS
The components can be defined as the number of widgets, which helps to create an application. Ext JS is also formed by many widgets known as components. The Component is referred to as the DOM element, which contains the complicated functionality. All components are inherited from the Ext. Component class.
Ext JS application includes various types of elements, such as Combobox, grid, panel, container, textfield, numberfield, etc.
The Ext JS UI (User Interface) components are extracted from Ext. Components class. Ext.Component class is also extracted from the Ext.Base class.
Here, we have some components of Ext JS that are tabulated in the following table.
Class System in Ext JS
A Class can be defined as an extensible program code-template that helps to create the objects, provides initial value for the member variables, and implement the behavior of methods and member functions.
In Ext JS, Ext is used as a namespace that is used to encapsulate the classes in Ext JS. Ext JS framework contains its own class system. Ext allows us to use more than 300 classes, which can be used for multiple functionalities. An Ext class includes approx. 59 properties and 78 methods. Some of the essential methods are Ext.apply, Ext.create, Ext.define, Ext.getCmp, Ext.override, and Ext.application etc.
Defining a Class in Ext JS
If you want to define a class in Ext JS, then you have to use Ext.define().
Here, we have discussed all the values of the syntax.
Class Name: It is the class name that is given by the user depending upon the application structure.
Class Member/Properties: Class member/properties are used to determine the class behavior.
Callback Function: It is a function that is invoked when the class is loaded. It is an optional function to use.
Creating an object
It is easy to create the object in Ext JS like in the other object-oriented programming language (OOPs). You can create the object in Ext JS by using two following ways:
Creating an object with the help of Ext.create()
Creating object with the help of new keyword
Ext JS Inheritance
In object-oriented programming, the term inheritance can be defined as a technique in which a subclass imports the superclass's properties.
In Ext JS, you can use inheritance in following two ways:
Inheritance with the help of Ext.extend method
Inheritance with the help of Mixins
The mixins keyword helps us to import the class A properties into class B. Usually, mixins are included in the controller, which contains the declaration of various classes such as store, view, etc.
You can also invoke DepartmentUtils class and use it inside the application.
Example of Ext JS program
Here, we are going to discuss the program code of Ext JS. In the below-written program, code first, we are required to create a simple HTML file named Sample.html and also provide the library files in the <head> tag.
Explanation of program
In the above program code, we have following:
Ext.onReady() method: This method is invoked when the Ext Js elements are ready to render.
Ext.create() method: It is used to build the object. In the above code, we created Ext.Panel object.
Ext.Panel: It is an inbuilt class used in Ext JS. It also contains the following different properties for different functions.
Render To: It is responsible for delivering the panel. In the above code, the div id is 'helloWorldPanel'.
Title: This property provides the title to the panel.
Height & Weight: These properties are used to give the size of the panel.
Html: This property helps us to show the Html content in the panel.
For the successful execution of the above program code, you can open the Sample.html file in any standard browser, and you will get the following output:
Method in Ext JS
There are some following methods given below, which are mostly used in Ext JS. These methods are predefined methods used for performing different functions. The various methods are stored in different classes.
This class contains various methods that help us to work with string data. The commonly used methods are given below in tabular format:
This class is used to determine the platform and operating system that you are using. It should be a mobile or a desktop and Windows or a Mac OS. Ext.is Class contains the following methods:
Ext.supports class is used to give information whether the feature is suitable for the device/browser or not. Ext.supports Class contains the following methods:
Here, we also have some methods which are used in Ext JS. These methods are listed below in the tabular form:
Advantages of Ext JS
There are some benefits of Ext JS which are given below:
Limitations of Ext JS