Blog

ExtJS Tutorial stands for Extended JavaScript. It is a JavaScript framework and a product of Sencha, based on YUI (Yahoo User Interface). It is basically a desktop application development platform with modern UI. This tutorial gives a complete understanding of Ext JS. This reference will take you through simple and practical approaches while learning Ext JS.

Audience

This tutorial has been prepared for beginners to help them understand the concepts of ExtJS to build dynamic web UI.

Prerequisites

For this tutorial, the reader should have prior knowledge of HTML, CSS, and JavaScript coding. It would be helpful if the reader knows the concepts of object-oriented programming and has a general idea on creating web applications.

Ext JS is a popular JavaScript framework which provides rich UI for building web applications with cross-browser functionality. Ext JS is basically used for creating desktop applications. It supports all the modern browsers such 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.

History

Ext JS 1.1

The first version of Ext JS was developed by Jack Slocum in 2006. It was a set of utility classes, which is an extension of YUI. He named the library as YUI-ext.

Ext JS 2.0

Ext JS version 2.0 was released in 2007. This version had a new API documentation for desktop application with limited features. This version doesn’t have backward compatibility with previous version of Ext JS.

Ext JS 3.0

Ext JS version 3.0 was released in 2009. This version added new features as chart and list view but at the cost of speed. It had backward compatibility with version 2.0.

Ext JS 4.0

After the release of Ext JS 3, the developers of Ext JS had the major challenge of ramping up the speed. Ext JS version 4.0 was released in 2011. It had the complete revised structure, which was followed by MVC architecture and a speedy application.

Ext JS 5.0

Ext JS version 5.0 was released in 2014. The major change in this release was to change the MVC architecture to MVVM architecture. It includes the ability to build desktop apps on touch-enabled devices, two-way data binding, responsive layouts, and many more features.

Ext JS 6.0

Ext JS 6 merges the Ext JS (for desktop application) and Sencha Touch (for mobile application) framework.

Features

Following are the highlighted features of Ext JS.

• Customizable UI widgets with collection of rich UI such as grids, pivot grids, forms, charts, trees.
• Code compatibility of new versions with the older one.
• A flexible layout manager helps to organize the display of data and content across multiple browsers, devices, and screen sizes.
• Advance data package decouples the UI widgets from the data layer. The data package allows client-side collection of data using highly functional models that enable features such as sorting and filtering.
• It is protocol agnostic, and can access data from any back-end source.
• Customizable Themes Ext JS widgets are available in multiple out-of-the-box themes that are consistent across platforms.

Benefits

Sencha Ext JS is the leading standard for business-grade web application development. Ext JS provides the tools necessary to build robust applications for desktop and tablets.

• Streamlines cross-platform development across desktops, tablets, and smartphones – for both modern and legacy browsers.
• Increases the productivity of development teams by integrating into enterprise development environments via IDE plugins.
• Reduces the cost of web application development.
• Empowers the teams to create apps with a compelling user experience.
• Offers a set of widgets to easily make a powerful UI.
• Follows MVC architecture, hence the code is highly readable.

Limitations

• The size of the library is large, around 500 KB, which makes initial loading time more and makes application slow.
• HTML is full of tags that makes it complex and difficult to debug.
• According to general public license policy, it is free for open source applications but paid for commercial applications.
• Sometimes for loading even simple things require few lines of coding, which is simpler in plain html or JQuery.
• Need quite experienced developer for developing Ext JS applications.

Tools

Following are the tools provided by Sencha used for Ext JS application development mainly at the production level.

Sencha CMD

Sencha CMD is a tool which provides the features of Ext JS code minification, scaffolding, and production build generation.

Sencha IDE Plugins

Sencha IDE plugins integrates Sencha frameworks into IntelliJ, WebStorm IDEs, which helps in improving the developer’s productivity by providing features such as code completion, code inspection, code navigation, code generation, code refactoring, template creation, spell-checking, etc.

Sencha Inspector

Sencha Inspector is a debugging tool which helps the debugger to debug any issue while development in ExtJS Tutorial.

Next Topic : Click Here