Ext JS is a

JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...

application framework In computer programming, an application framework consists of a software framework used by software developers to implement the standard structure of application software. Application frameworks became popular with the rise of graphical user inter ...

for building interactive cross-platform

web application A web application (or web app) is application software that is accessed using a web browser. Web applications are delivered on the World Wide Web to users with an active network connection. History In earlier computing models like client-serve ...

s using techniques such as

Ajax Ajax may refer to: Greek mythology and tragedy * Ajax the Great, a Greek mythological hero, son of King Telamon and Periboea * Ajax the Lesser, a Greek mythological hero, son of Oileus, the king of Locris * ''Ajax'' (play), by the ancient Gree ...

DHTML Dynamic HTML, or DHTML, is a term which was used by some browser vendors to describe the combination of HTML, style sheets and client-side scripts (JavaScript, VBScript, or any other supported scripts) that enabled the creation of interactive ...

and DOM scripting. It can be used as a simple component framework (for example, to create dynamic grids on otherwise static pages) but also as a full framework for building

single-page application A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. ...

s (SPAs). Originally built as an add-on library extension of YUI by Jack Slocum on April 15, 2007, Ext JS has had no dependencies on external libraries beginning with version 1.1. Nowadays, Ext JS can be used both as a single script (with all classes and components in one file) or by building the application with the Sencha Cmd.

Features

GUI controls (components)

Ext JS includes a set of

GUI The GUI ( "UI" by itself is still usually pronounced . or ), graphical user interface, is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicator such as primary notation, inste ...

-based form controls (or " widgets") for use within web applications: * text field and textarea input controls * date fields with a pop-up date-picker * numeric fields *

list box A list box is a graphical control element that allows the user to select one or more items from a list contained within a static, multiple line text box. The user clicks inside the box on an item to select it, sometimes in combination with the ...

and

combo box A combo box is a commonly used graphical user interface widget (or control). Traditionally, it is a combination of a drop-down list or list box and a single-line editable textbox, allowing the user to either type a value directly or select a val ...

es *

radio Radio is the technology of signaling and communicating using radio waves. Radio waves are electromagnetic waves of frequency between 30 hertz (Hz) and 300 gigahertz (GHz). They are generated by an electronic device called a transm ...

and

checkbox A checkbox (check box, tickbox, tick box) is a graphical widget that permits the user to make a binary choice, i.e. a choice between one of two possible mutually exclusive options. For example, the user may have to answer 'yes' (checked) or 'n ...

controls * html editor control * grid control (with both read-only and edit modes, sortable data, lockable and draggable columns, and a variety of other features) * tree control * tab panels * toolbars * desktop application-style menus * region panels to allow a form to be divided into multiple sub-sections *

slider Slider or Sliders may refer to: Arts * K.K. Slider, a fictional character within the ''Animal Crossing'' franchise * ''The Slider'', a 1972 album by T. Rex * ''Sliders'' (TV series), an American science fiction and fantasy television series * S ...

s * vector graphics charts

Themes and toolkits

Sencha also provides some themes to style the components. Changing a theme requires simply changing CSS and a script of the theme. When using Sencha CMD a re-build of the application might be required. All components should work with each theme, but their look&feel will change. For example Classic theme has rather small elements not suited for touch devices. Neptune Touch has bigger elements better suited for tablets and phones. Ext JS comes in two flavours called ''modern'' and ''classic'' toolkit. They differ not only with available themes but there are also some API differences between them. So it is not as easy to migrate from one toolkit to the other as it is for themes. There are plans to even out some differences between the toolkits in Ext JS 7.1, which is planned for 2019.

Programming toolkit

Ext JS is a composition of classes that has many capabilities. Some examples: * an abstract layer for browsers (e.g. Ext.isArray that can be used as a replacement for Array.isArray) * state management (stores) * server communication layer (proxies and Ext.Ajax.request) * layout and window management * event management (with simplified creation of custom events for custom components) * routing

Class system

Ext JS has its own class system. Classes are defined with Ext.define and then an instance can be created with Ext.create. Some classes (e.g. components and stores) can have aliases and can be created by an alias. Instances of components are created automatically when the parent component is created. Class can extend both custom and built-in classes. Typically custom components would extend built in components (e.g. MyApp.views.ProductsTable would extend built-in Ext.grid.Panel). There is a built-in dynamic loader so classes can have dynamic dependencies (loaded on-demand). There are two types of dependencies in ExtJS. Dependencies declared with requires property are loaded before the instance of the class is created. Dependencies defined in uses property might be loaded after the instance of the class is created. It is also possible to override classes. Even built-in classes. Overriding built-in classes might be useful to e.g. provide internationalization or create patches. Overridden class gets merged with new declaration. Each class can be overridden as many times as required (e.g. providing i18n and then l10n).

Ext JS version history

Ext JS 2.0

Ext JS version 2.0 was released on 4 December 2007. This version was promoted as providing an interface and features more similar to those traditionally associated with desktop applications. Also promoted were the new user documentation,

API An application programming interface (API) is a way for two or more computer programs to communicate with each other. It is a type of software interface, offering a service to other pieces of software. A document or standard that describes how ...

documentation, and samples. Ext JS 2.0 did not provide a backward compatibility with version 1.1. A migration guide was developed to address this.

Ext JS 3.0

Ext JS version 3.0 was released on 6 July 2009. This version added communication support for

REST Rest or REST may refer to: Relief from activity * Sleep ** Bed rest * Kneeling * Lying (position) * Sitting * Squatting position Structural support * Structural support ** Rest (cue sports) ** Armrest ** Headrest ** Footrest Arts and ente ...

and a new Ext.Direct server side platform. New flash charting and ListView elements were added to the standard display components. It was backwards compatible with version 2.0 code.

Ext JS 4.0

Version 4.0 of the Ext framework was released on April 26, 2011. It includes a completely revised class structure, a revised data package, an animation and drawing package that uses

SVG Scalable Vector Graphics (SVG) is an XML-based vector image format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium sinc ...

and VML, and revised charting and theming. It also includes an optional architecture that provides a

model–view–controller Model–view–controller (MVC) is a software architectural pattern commonly used for developing user interfaces that divide the related program logic into three interconnected elements. This is done to separate internal representations of infor ...

(MVC) style of code organization.

Ext JS 5.0

Version 5.0 of the Ext JS framework was released on June 2, 2014. It includes the ability to build desktop apps on touch-enabled devices—using a single code base, a Model View ViewModel ( MVVM) architecture, two-way data binding, responsive layouts, and other component upgrades with support for adding widgets inside a grid cell for data visualization and big data analytics. Ext JS 5 also includes an upgraded touch-optimized charting package along with additional financial charting capabilities. Ext JS 5 supports modern and legacy browsers including: Safari 6+, Firefox, IE8+, Chrome, and Opera 12+. On the mobile platform, Ext JS 5 supports Safari on iOS 6 and 7, Chrome on Android 4.1+, and Windows 8 touch-screen devices (such as Surface and touch-screen laptops) running IE10+. Important: From the Ext JS 5 version you cannot buy license for fewer than 5 developers.

Ext JS 6.0

Version 6.0 of the Ext JS framework was released on July 1, 2015. It merges the

Sencha Touch Sencha Touch is a user interface (UI) JavaScript library, or web framework, specifically built for the Mobile Web. It can be used by Web developers to develop user interfaces for mobile web applications that look and feel like native applic ...

(mobile) framework into Ext JS.

Ext JS 7.0

Version 7.0 of Ext JS framework was released on August 29, 2019. Ext JS 7.0 was a minor release. Several components were added to the Modern Toolkit. The Classic Toolkit received the

Material Design Material Design (codenamed Quantum Paper) is a design language developed by Google in 2014. Expanding on the "cards" that debuted in Google Now, Material Design uses more grid-based layouts, responsive animations and transitions, padding, and ...

Theme.

Sencha

On 15-Jun-2010, the merge of Ext JS with

JQTouch jQT (formerly jQTouch) is an open-source Zepto/ JQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, G1 ( Android), and Palm Pre. It enables programmers to develop mobile applications wit ...

and Raphaël was announced forming a new organisation called Sencha Inc. Ext JS continues to be available as a main product on the new Sencha website together with

, Sencha GWT (now Sencha GXT), Sencha Architect, Sencha Animator and Ext core. On 23-Aug-2017, Sencha was acquired by IDERA (which in turn owns

Embarcadero Technologies Embarcadero Technologies, Inc. is an American computer software company that develops, manufactures, licenses, and supports products and services related to software through several product divisions. It was founded in 1993, went public in 2000, ...

). Embarcadero is known for acquisitions of rapid application development software such as

Delphi Delphi (; ), in legend previously called Pytho (Πυθώ), in ancient times was a sacred precinct that served as the seat of Pythia, the major oracle who was consulted about important decisions throughout the ancient classical world. The oracl ...

(which relies on

Object Pascal Object Pascal is an extension to the programming language Pascal that provides object-oriented programming (OOP) features such as classes and methods. The language was originally developed by Apple Computer as ''Clascal'' for the Lisa Work ...

as its primary programming language).

Sencha JetBrains plugin

Sencha’s JetBrains plugin is an Integrated Development Environment tool that creates a confluence between Sencha Frameworks and JetBrains software. This integration comes in the form of

code completion Autocomplete, or word completion, is a feature in which an application predicts the rest of a word a user is typing. In Android and iOS smartphones, this is called predictive text. In graphical user interfaces, users can typically press the tab ...

, inspection, and suggestion, while cooperating with native JetBrains behavior.

Ext.NET

Ext.NET is an ASP.NET component framework integrating the Ext library, current version (as of September 2017) is 4.4 which integrates ExtJS version 6.5.1.

License history

YUI-Ext was available under the

BSD license BSD licenses are a family of permissive free software licenses, imposing minimal restrictions on the use and distribution of covered software. This is in contrast to copyleft licenses, which have share-alike requirements. The original BSD li ...

. In April 2008, the

open source license An open-source license is a type of license for computer software and other products that allows the source code, blueprint or design to be used, modified and/or shared under defined terms and conditions. This allows end users and commercial compa ...

associated with Ext was changed. In version 2.0.2, the authors stated that Ext was available under an LGPL-style license as long as you "plan to use Ext in a personal, educational or non-profit manner" or "in an open source project that precludes using non-open source software" or "are using Ext in a commercial application that is not a software development library or toolkit". This was no longer the case with Ext 2.1. The Ext authors claim that section 7 of the LGPL as it is worded did not apply to "conditions" which their license required before distribution under the LGPL was permitted as opposed to "additional restrictions", which section 7 allowed a distributor to remove. On 20 April 2008, Ext 2.1 was released under a new dual license structure which allowed the options of the full GPL 3.0 license or a proprietary license. The change in license over time, from a permissive open source license to a restrictive dual license, caused controversy in the Ext user community. Sencha has published details about its commercial and GPL license terms on its website. In November 2018 Sencha announced its Community Edition that is free but restricted by annual revenue of either a person or company using ExtJS.

References

Bibliography

* * *

External links

The original Ext JS website by Jack Slocum
{{Widget toolkits JavaScript libraries Ajax (programming) Web frameworks