Home » Ext JS Tutorial

Ext JS Tutorial

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

Sr.No. Version Description
1. Ext JS 4.x It is used to develop desktop applications. In this version, the Sencha Touch framework is used to create tablet and mobile applications.
2. Ext JS 5.x It is used to create tablet and mobile applications.
3. Ext JS 6.x-Current This version is used to develop applications for all types of devices such as mobile, tablet, and desktop. In this version, the developer needs to write less code. It includes two kinds of toolkits: Modern and Classic.

History of Ext JS

The history of Ext JS is shown below in the tabular form:

Sr.No. Version Released Year Description
1. Ext JS 1.1 2006 It was the first version of Ext JS created by Jack Slocum in 2006. Ext JS 1.1 was a collection of utility classes. It has the YUI (Yahoo User Interface) extension named as YUI-Ext.
2. Ext JS 2.0 2007 It was the second version of Ext JS introduced in 2007. This version has API documentation for desktop applications, but with the limited features. This version was not backward compatible with the previous version.
3. Ext JS 3.0 2009 It was the third version of Ext JS released in 2009. Ext JS 3.0 associated with some new features such as list and chart view. This version has backward compatibility with the previous version.
4. Ext JS 4.0 2011 After introducing Ext JS 3.0, the developers face a significant challenge to boost up the speed.

Ext JS 4.0 was the fourth version of Ext JS introduced in 2011. It was the completely upgraded version perused by MVC (Model View Controller) and a speedy application.

5. Ext JS 5.0 2014 It was the fifth version of Ext JS released in 2014. The major modification of this version was to replace MVC (Modern View Controller) architecture to MVVM (Model view view-model) architecture. This version provides some new features such as develop the desktop application for touch devices, responsive layouts, and two-way data binding.
6. Ext JS 6.0 2014 – present It is the current version of Ext JS. In this version, the developers combine the Ext JS (desktop application) framework with Sencha Touch (mobile application) framework.

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

Ext JS Angular JS
It is a framework used to create a web-based enterprise application with the help of JavaScript. It is a framework used to extend the syntax of HTML.
Ext JS supports MVC (Model View Controller) and MVVM (Model view view-model) architecture. It only supports MVC architecture.
It supports responsive UI (User Interface). It doesn’t support responsive UI. If you want to use a responsive UI design, you are required to use bootstrap or any other framework.
It is a per-server commercial license open-source framework maintained by Sencha. It is also an open-source framework maintained by Google and others.
It provides the ALM (Application Lifecycle Management) tools for Ext JS. It doesn’t provide any ALM tool. If you want to use it, then you will go for a third party ALM tool.
In the Ext JS, there is no need to write HTML 5 or CSS 3 code. In Angular JS, you are required to write HTML 5 or CSS 3 code.
It supports OOB (Out of the Box) components such as dataview, treeview, form, and grid. Angular JS doesn’t support any OOB UI component.
It supports OOB themes such as Classic, Neptune, gray, Crisp, and Triton, etc. It doesn’t support any OOB themes.

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:

Ext JS Tutorial

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:

Ext JS Tutorial

Step 3: After filling the required details, you need to click on Download Now, and your library files start downloading, as shown below:

Ext JS Tutorial

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:

Ext JS Tutorial

Step 6: You need to click on the Next button, and you will get the following screenshot:

Ext JS Tutorial

Step 7: Now, select the “I accept the agreement “and then click on the Next button, and you will get the following snippet:

Ext JS Tutorial

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.

Ext JS Tutorial

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:

Ext JS Tutorial

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.

Sr. No. File Description
1. ext-all.js This file includes the code detruncate without any comments in the files.
2. ext.js This is a base file that has all functions to execute the application.
3. ext-all-dev.js It is also a detruncate file used for development. It has console logs and comments, which helps us to detect errors.
4. ext-all-debug.js This file is used for debugging purpose.
5. ext-all.js The ext-all.js file is used for development purposes. It is a small file.

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.

Ext JS Tutorial

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 Tutorial

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.

Sr. No. Component Description
1. Form The form helps us to obtain the data from the user.
2. Grid It is used to display the data in the form of a table.
3. Chart It is used to display the data in a pictorial manner.
4. Message Box This component is used to display the data in an alert box form.
5. Window The Window component helps us to create the window. It is always popped up when an event occurs.
6. Tool tip It is used to display the data during the event occurring.
7. HTML editor The editor is used to style the data input by the user. It should be color, size, and font.
8. Progress Bar This bar always shows the progress of the backend functions.

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:

Ext JS Tutorial

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:

Sr. No. Method Description
1. Ext.String.htmlEncode It makes the html value parsable by encoding it.
For Example- Ext.String.htmlEncode(“< p > Hello Ext JS < /p >”); Output – “&lt; p &gt; Hello Ext JS &lt; /p &gt;”.
2. Ext.String.htmlDecode It decodes the encoded html value.
For Example-
Ext.String.htmlDecode("&lt; p &gt; Hello Ext JS &lt; /p &gt;");

Output- “< p > Hello Ext JS < /p >”

3. Ext.String.trim This method is used to remove the undesirable space in the string.
For Example-
Ext.String.trim('   Ext JS   ');

Output- “Ext JS”

4. Ext.String.urlAppend This method is used to affix the value of the URL string.
For Example-
Ext.String.urlAppend('https://www.google.com' , 'hello Ext JS');

Output- “https://www.google.com?hello Ext JS”

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

Output- “https://www.google.com?index=1&hello Ext JS”

5. Ext.String.toggle This method is used to switch the value between two different values.
For Example-
var toggleString = 'ASCENDING'  toggleString = Ext.String.toggle(p, 'ASCENDING', 'DESCENDING');

Output – DESCENDING as toggleString had value ASCENDING. Now again, if you print the same you will get toggleString = “ASCENDING” this time, as it had value ‘DESCENDING’.
It is same as like ternary operator

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:

Sr.No. Method Description
1. Ext.is.Android It is used to return true value with the android OS; otherwise it returns false.
2. Ext.is.Platforms This method is used to return the platform used for the current version.
For Example-
[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"}
3. Ext.is.Desktop It returns true if you are using a desktop, otherwise false.
4. Ext.is.iPhone This method returns true if you are using a mobile phone; otherwise, it returns false.
5. Ext.is.Phone This method returns true if you are using an iPhone; otherwise, it returns false.
6. Ext.is.iPod When you use an iPod, then it returns true, otherwise false.
7. Ext.is.iPad If you use an iPad then it returns true, otherwise false.
8. Ext.is.Linux It returns true if you are working with the Linux operating system, otherwise false.
9. Ext.is.Mac It returns true if you are working with the Mac operating system, otherwise false.
10. Ext.is.Blackberry It returns true if you are working with the Blackberry operating system, otherwise false.
11. Ext.is.Windows It returns true if you are working with a Windows operating system, otherwise false.

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:

Sr. No. Method Description
1. Ext.support.Svg Svg stands for Scalable vector graphics. This method checks whether the device supports the Svg feature or not.
It checks for following-
doc.createElementNS && !!doc.createElementNS( "http:/" + "/www.w3.org/2000/svg", "svg").createSVGRect.
2. Ext.supports.History This method returns true if the device supports the history of HTML 5; otherwise, it returns false.
3. Ext.supports.GeoLocation This method is used to support the geolocation feature. It also checks for the navigator.geolocation method.
4. Ext.supports.Range Ext.supports. Range method checks the browser, whether it supports the document.createRange method or not.
5. Ext.supports.Canvas This method is used to monitor that the device is suitable for a canvas to draw a method or not.
For Example-
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:

Sr. No. Method Description
1. Ext.getVersion() This method returns the current version of Ext Js version.
For Example-
When you invoke Ext.getVersion(), then it returns an array value such as version, short version, etc.
Ext.getVersion().- Returning the current version of Ext JS such as “7.2.0”.
2. Ext.userAgent() This method provides information about the userAgent browser. The userAgent helps us to describe the Od and browser for server.
3. Version related function This method helps us to provide the current browser version. It contains some functions such as Ext.firefoxVersion, Ext.ieVersion, etc.
For Example-
If you use the Firefox and invoke the method for Internet Explorer, then it returns 0, and when you are using the same browser (IE), then it returns the browser version.
4. Ext.typeOf() It is used to display the variable’s datatype.
For Example-
Var p = 10;  Var q = 'hello';  Ext.typeOf(p);

Output- Number
Ext.typeOf(q);
Output- String

5. Browser related functions These functions are used to return Boolean value according to the current web browser. The methods are Ext.isIE6, Ext.isChrome, Ext.isIE, Ext.isFF06 etc.
6. Data type related methods It returns the Boolean value according to the variable.
For Example-
Var x = ['x', 'yz'];  Var y = 'Hello';  Var z = '456';  Var nullvariable;  Var deifnedvariable;  Function extraFunction() {return true;}
Ext.isArray(a); //returns true
Ext.isString(b); //returns true
Ext.isNumber(c); //returns true
Ext.isEmpty(emptyVariable); //returns true
Ext.isEmpty(b); //returns false
Ext.isDefined(definedVariable); //returns true
Ext.isfunction(extraFunction); //returns 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.

You may also like