Ext JS Tutorial

What is Ext JS

Ext JS is a powerful application development platform based on JavaScript. It helps you to create data-intensive HTML 5 applications by using JavaScript. Ext JS framework allows us to create an enterprise application with user experience with the help of JavaScript, without writing the code of CSS or HTML 5. It provides a rich set of UIs (User interface) for creating web applications with cross-browser functionality.

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.

Ext JS is a product of the Sencha Touch JavaScript library. It offers the following products:

• Sencha Touch: It is a high-performance HTML5 framework used for developing mobile applications.
• Sencha GXT: It is the most robust approach to develop rich web-based applications with the help of Java.
• Ext JS: It is a framework used to develop web applications by using HTML5 and JavaScript.

Features of Ext JS

1. Ext JS is a client-side JavaScript framework used to create enterprise applications.
2. You can develop a single page application with the help of Ext JS.
3. Ext JS supports the Object-oriented programming concepts (OOPs) with JavaScript. It makes application development and maintenance easier.
4. Ext JS is based on MVC (Model View Controller) and MVVM (Model view view-model).
5. Ext JS supports the OOB (Out of the Box) components, layouts, and the containers.
6. It also has a Data package concept, which makes it easy to access or save the data.
7. Ext JS supports the localization of the packages that helps you to localize the application.
8. Ext JS provides the drag and drops functionality for components and UI containers.
9. It also includes the themes that are OOB (Out of the Box) such as Triton, Neptune, Grey, Crisp, and Classic.
10. Ext JS includes the custom themes with the help of compass and SASS (Syntactically Awesome Style Sheet).
11. Ext JS has a code compatibility feature of new versions with the older version.
12. Ext JS includes a flexible layout manager that allows us to organize the display of the data and content across multiple browsers, screen sizes, and devices.

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.

Sencha Cmd

It is a tool that facilitates the developer with some features such as minification of the code, scaffolding, and production build generation.

Sencha Inspector

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 4: The downloaded folder is a zip folder. You need to unzip the folder, and you will get the various CSS and JavaScript files.

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.

The library files include the following JavaScript and CSS files. These are listed below:

JavaScript Files

In the unzipped folder, you will get the following files, which you need to include with the application.

CSS Files

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 ext7.2.0.84-windowsext-7.2.0.84buildclassictheme-classicresourcestheme-classic-all.css folder.

• If you want to use the mobile application, then you are required to use a modern theme that you can find under the ext-7.2.0.84 ext-7.2.0.84buildmodern folder.
• If you’re going to use the desktop application, then you are required to use the classic theme, which you can find under the ext-7.2.0.84 ext-7.2.0.84buildclassic 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

A content delivery network can be determined as a collection of geographically distributed servers used to provide the fast delivery of content through the internet. The CDN provides the facility to transfer the essential assets which are required for loading the content such as JavaScript files, HTML files, images, stylesheets etc.

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

The text editors are used to write and execute the source code of various languages such as HTML, JavaScript, CSS Python, Ruby, PHP, etc. Ext JS is a JavaScript framework in which you can also use HTML files. So, you can use various text editors according to your choice and requirements. Some of these text editors are given below:

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:

https://code.visualstudio.com/

Eclipse

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:

https://www.eclipse.org/

Notepad

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:

• Google Chrome 10 and above version
• Microsoft Edge 12
• IE (Internet Explorer) 6 and above version
• Firefox 3.6 and above version
• Safari 4 and above version
• Opera 11 and above version

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

The Ext JS application folder contains the JavaScript folder. The Ext Js application includes model, store, utility, view, controller files with app.js file. Here, we will be discussing each file in detail.

Model.js

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.

App.js

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.

View.js

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.

Controller.js

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.

Store.js

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.

Utils.js

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.

ViewModel

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().

Syntax

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.

Example

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.

Sample.html

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.

Output

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.

Ext.String Class

This class contains various methods that help us to work with string data. The commonly used methods are given below in tabular format:

Ext.String.htmlDecode("< p > Hello Ext JS < /p >");

Ext.String.trim('   Ext JS   ');

Ext.String.urlAppend('https://www.google.com' , 'hello Ext JS');

Ext.String.urlAppend('https://www.google.com?index=1' , 'hello Ext JS');

var toggleString = 'ASCENDING'  toggleString = Ext.String.toggle(p, 'ASCENDING', 'DESCENDING');

toggleString = ((toggleString =='ASCENDING')? 'DESCENDING' : 'ASCENDING' );

Ext.is Class

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:

[Object { property = "platform", regex = RegExp, identity = "iPhone"},   Object { property = "platform", regex = RegExp, identity = "iPod"},   Object { property = "userAgent", regex = RegExp, identity = "iPad"},   Object { property = "userAgent", regex = RegExp, identity = "Blackberry"},   Object { property = "userAgent", regex = RegExp, identity = "Android"},   Object { property = "platform", regex = RegExp, identity = "Mac"},   Object { property = "platform", regex = RegExp, identity = "Windows"},   Object { property = "platform", regex = RegExp, identity = "Linux"}

Ext.supports Class

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:

doc.createElementNS && !!doc.createElementNS( "http:/" + "/www.w3.org/2000/svg", "svg").createSVGRect.

doc.createElement('canvas').getContext

Miscellaneous Methods

Here, we also have some methods which are used in Ext JS. These methods are listed below in the tabular form:

Var p = 10;  Var q = 'hello';  Ext.typeOf(p);

Var x = ['x', 'yz'];  Var y = 'Hello';  Var z = '456';  Var nullvariable;  Var deifnedvariable;  Function extraFunction() {return true;}

Advantages of Ext JS

There are some benefits of Ext JS which are given below:

• It follows the MVC (Model View Controller) architecture that helps us to make the code more readable.
• It provides a collection of widgets, which helps us to create a powerful UI (User Interface).
• It helps us to reduce the development cost.
• It streamlines cross-platform development.
• It increases the development by integrating the development with the IDE plugins.

Limitations of Ext JS

• The library file slows the application and increases the loading time because it has a huge size of 500 kb.
• Ext Js require the experienced developers to develop the applications.
• The use of Html language makes this application complicated and hard to debug.
• Ext JS is free for open-source applications but paid for commercial purposes.
• Sometimes simple things need codes, but it is easier in JQuery or plain Html.