04 06
Introduction to ExtJS Framework
Ankit Jani

Introduction to ExtJS Framework

Introduction to Ext JS Framework

Extended JavaScript (Ext JS), is a JavaScript framework and product of sencha which is based on YUI (Yahoo user interface). It is basically a desktop application development platform with modern UI.

What is Ext JS

Ext JS is a popular JavaScript framework which provide rich UI for building web applications with cross browser functionality. It supports all the modern browsers as IE6+, FF, Chrome, safari 6+, opera 12+ etc. Whereas another product of sencha, sencha touch is used for mobile applications.

Ext JS is based on MVC/ MVVM architecture. The latest version of Ext JS 6 is a single platform which can be used for both desktop and mobile application without having different code for different platform.

Benefits of Ext JS

1) Streamlines cross-platform development across desktops, tablets, and smartphones — for both modern and legacy browsers.
2) Increases the productivity of development teams by integrating into enterprise development environments via IDE plugins.
3) Reduces the cost of web application development.
4) Empowers teams to create apps with a compelling user experience.
5) It has set of widgets for making UI powerful and easy.
6) It follows MVC architecture so highly readable code.

Steps to Configure Ext JS

Here, i am going to use the Ext JS 6.2.0 in Java .

1) Download the Ext JS Library from http://pages.sencha.com/extjs_6_2_ea.html after registering.
2) you need to put this library in “app/lib” folder. If these folders not exist then you need to create it.
3) Project architecture of Ext JS Application

Ext JS app folder will reside in JavaScript folder of your project.

app.js: the main file from where the flow of program will start, which should be included in main HTML file using “script” tag. App calls the controller of application for rest of the functionality.
As Ext JS follows MVC and MVVM design pattern, The App will contain controller, view, model, store, utility files with app.js.

Store.js: It contains the data locally cached which is to be rendered on view with the help of model objects. Store fetches the data using proxies which has the path defined for services to fetch the backend data.
In MVVM architecture controller is replaced by ViewModel.

ViewModel: It is basically medicates the changes between view and model. It binds the data from model to view. At the same time it does not have any direct interaction with view it has only knowledge of model.

ViewController: It Simplifies the connection to views using “listeners” and “reference” configs.
It provides encapsulation to make nesting views reliable.

4) Create index.html page in the project.


Description of above code :

Ext.onReady() method will be called when Ext JS is ready to render the Ext JS elements.

Ext.create() method is used to create object in Ext JS, here we are creating an object of simple panel class using Ext.Panel.

Ext.Panel is the predefined class of Ext JS library for creating a panel.

Every Ext JS class has different attributes to perform some basic functionalities.

5) You can also use form, tab and viewport as same as i have used panel.

6) Now run the project and open “index.html” file in a browser, you will get the following output on browser.
Please refer below link for more details about Ext JS.


Leave a Reply

Your email address will not be published. Required fields are marked *