Ext JS

GUI controls (components)

Ext JS includes a set of GUI-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 and combo boxes
• radio and checkbox 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
• sliders
• 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.^[6]

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.^{[needs update][7]}

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.^[8][9] 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).^[10]

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^[11] 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 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 documentation, and samples.^[12]

Ext JS 2.0 did not provide a backward compatibility with version 1.1. A migration guide was developed to address this.^[13]

Ext JS 3.0

Ext JS version 3.0 was released on 6 July 2009. This version added communication support for REST 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,^[14] a revised data package, an animation and drawing package that uses SVG and VML,^[15] and revised charting and theming. It also includes an optional architecture that provides a model–view–controller (MVC) style of code organization.

Ext JS 5.0

Version 5.0 of the Ext JS framework was released on June 2, 2014.^[16] It includes the ability to build desktop apps on touch-enabled devices^[17]—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.^[18] 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.^[19] It merges the Sencha Touch (mobile) framework into Ext JS.^[20]

Ext JS 7.0

Version 7.0 of Ext JS framework was released on August 29, 2019.^[21] This version introduced several new components in the Modern Toolkit. The Classic Toolkit received the Material Design Theme.