View source for Ext JS

{{Short description|JavaScript application framework}}
{{Infobox software
| name = Ext JS JavaScript Framework
| screenshot = Extjs-desktop.jpg
| caption = Ext JS 2.0 Web Desktop
| released               = {{Start date and age|2007|01|08}}
| latest release version = 7.8.0
| latest release date = {{release date|2024|05|21}}<ref>{{cite web |title=Ext JS 7.8 Has Arrived |url=https://www.sencha.com/blog/ext-js-7-8-has-arrived/ |website=Sencha.com |access-date=21 May 2024 |date=21 May 2024}}</ref>
| genre = [[JavaScript library]]
| license = Proprietary
| website = {{URL|https://www.sencha.com/products/extjs/}}
}}
'''Ext JS''' is a [[JavaScript]] [[application framework]] for building interactive cross-platform [[web application]]s<ref>See also, [[Rich Internet application]]</ref> using techniques such as [[Ajax (programming)|Ajax]], [[Dynamic HTML|DHTML]] and [[Document Object Model|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]]s (SPAs).
Originally built as an add-on library extension<ref>{{cite web|url=http://yuiblog.com/blog/2006/10/10/ten-questions-slocum/|title=Ten Questions with YAHOO.ext Author Jack Slocum.|access-date=2015-08-11|archive-date=2015-09-13|archive-url=https://web.archive.org/web/20150913002531/http://yuiblog.com/blog/2006/10/10/ten-questions-slocum/|url-status=dead}}</ref> of [[YUI Library|YUI]] by Jack Slocum on April 15, 2007,<ref>{{cite web|url=https://twitter.com/jackslocum/status/323672362883104768|title=@jackslocum #ExtJS 1.0 was released April 15th, 2007. Happy birthday. @Sencha |publisher=Jack Slocum|access-date=2013-04-14}}</ref> Ext JS has had no dependencies on external libraries beginning with version 1.1.<ref>As of version 2.0, Ext JS works with different base libraries or adapters. (e.g. [[YUI Library|YUI]], [[jQuery]], [[Prototype JavaScript Framework|Prototype]]), or it can work [[:wikt:stand-alone|stand-alone]]. The capability to work with multiple base libraries was removed in the 4.0 release.</ref> 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 [[graphical user interface|GUI]]-based form controls (or "[[GUI widget|widget]]s") for use within web applications:
* [[text box|text field]] and textarea input controls
* date fields with a pop-up date-picker
* numeric fields
* [[list box]] and [[combo box]]es
* [[radio button|radio]] and [[check box|checkbox]] controls
* html editor control
* [[grid view|grid control]] (with both read-only and edit modes, sortable data, lockable and draggable columns, and a variety of other features)
* [[tree view|tree control]]
* [[tab (GUI)|tab]] panels
* toolbars
* desktop application-style menus
* region panels to allow a form to be divided into multiple sub-sections
* [[slider (computing)|slider]]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.<ref>{{Cite web|url=https://docs.sencha.com/extjs/6.5.3/guides/core_concepts/theming.html|title=Theming System {{!}} Ext JS 6.5.3|website=Sencha Documentation|access-date=2018-06-11}}</ref>
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.{{Update after|2019}}<ref>{{Cite news|url=https://www.sencha.com/blog/sencha-product-roadmap-update/|title=Sencha Product Roadmap Update|date=2017-11-29|work=Sencha.com|access-date=2018-06-11|language=en-US}}</ref>
=== Programming toolkit ===
Ext JS is a composition of classes that has many capabilities. Some examples:
* an abstract layer for browsers (e.g. <code>Ext.isArray</code> that can be used as a replacement for <code>Array.isArray</code>)
* state management (stores)
* server communication layer (proxies and <code>Ext.Ajax.request</code>)
* 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.<ref>{{Cite web|url=https://docs.sencha.com/extjs/6.5.3/guides/core_concepts/classes.html|title=The Class System {{!}} Ext JS 6.5.3|website=Sencha Documentation|access-date=2018-06-11}}</ref><ref>{{Cite web|url=https://docs.sencha.com/extjs/6.5.3/guides/other_resources/oop_concepts.html|title=Basics of OOP {{!}} Ext JS 6.5.3|website=Sencha Documentation|access-date=2018-06-11}}</ref> Classes are defined with <code>Ext.define</code> and then an instance can be created with <code>Ext.create</code>. 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. <code>MyApp.views.ProductsTable</code> would extend built-in <code>Ext.grid.Panel</code>).<ref>{{Cite web|url=https://docs.sencha.com/extjs/6.5.3/guides/core_concepts/components.html|title=Components {{!}} Ext JS 6.5.3|website=Sencha Documentation|access-date=2018-06-10}}</ref>
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 <code>requires</code> property are loaded before the instance of the class is created. Dependencies defined in <code>uses</code> 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<ref>{{Cite web|url=https://docs.sencha.com/extjs/6.5.3/guides/core_concepts/localization.html|title=Localization {{!}} Ext JS 6.5.3|website=Sencha Documentation|access-date=2018-06-11}}</ref> 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]] documentation, and samples.<ref>{{cite web|url=http://extjs.com/deploy/dev/docs/ |title=Ext JS 4.0.7 - Sencha Docs |publisher=Extjs.com |access-date=2012-11-19}}</ref>
Ext JS 2.0 did not provide a backward compatibility with version 1.1. A migration guide was developed to address this.<ref>[http://extjs.com/learn/Ext_1_to_2_Migration_Guide] {{webarchive|url=https://web.archive.org/web/20080220080434/http://extjs.com/learn/Ext_1_to_2_Migration_Guide|date=February 20, 2008}}</ref>
===Ext JS 3.0===
Ext JS version 3.0 was released on 6 July 2009.  This version added communication support for [[Representational State Transfer|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,<ref>{{cite web|url=http://www.sencha.com/blog/2011/01/19/countdown-to-ext-js-4-dynamic-loading-and-new-class-system/ |title=Countdown to Ext JS 4: Dynamic Loading and New Class System &#124; Blog |publisher=Sencha |date=2011-01-19 |access-date=2012-11-19}}</ref> a revised data package, an animation and drawing package that uses [[Scalable Vector Graphics|SVG]] and [[Vector Markup Language|VML]],<ref>{{cite web|url=http://www.sencha.com/blog/2011/01/21/countdown-to-ext-js-4-data-package/ |title=Countdown to Ext JS 4: Data Package &#124; Blog |publisher=Sencha |date=2011-01-21 |access-date=2012-11-19}}</ref> 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.<ref>{{cite web|url=http://www.sencha.com/blog/announcing-sencha-ext-js-5/ |title=Announcing Sencha Ext JS 5 &#124; Blog |publisher=Sencha |date=2014-06-02 |access-date=2014-07-16}}</ref> It includes the ability to build desktop apps on touch-enabled devices<ref>{{cite web|url=http://www.eweek.com/blogs/first-read/sencha-ext-js-5-unifies-mobile-desktop-app-dev.html |title=Sencha Ext JS 5 Unifies Mobile, Desktop App Dev |publisher=eWeek |date=2014-06-14 |access-date=2014-09-11}}</ref>—using a single code base, a Model View ViewModel ([[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.<ref>{{cite web|url=http://www.drdobbs.com/web-development/sencha-ext-js-5-streamlines-and-unifies/240168397 |title=Sencha Ext JS 5 Streamlines and Unifies |publisher=Dr. Dobb's |date=2014-06-05 |access-date=2014-09-11}}</ref> 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.<ref>{{cite web|title=Release Notes for EXT JS 6.0.2|url=https://docs.sencha.com/extjs/6.0.0/guides/whats_new/release_notes.html|access-date=6 January 2017}}</ref> It merges the [[Sencha Touch]] (mobile) framework into Ext JS.<ref>{{cite web|title=Sencha Unifies JavaScript Development Frameworks|url=http://www.itbusinessedge.com/blogs/it-unmasked/sencha-unifies-javascript-development-frameworks.html|access-date=28 August 2015}}</ref>
===Ext JS 7.0===
Version 7.0 of Ext JS framework was released on August 29, 2019.<ref>{{cite web|title=Release Notes for EXT JS 7.0.0|url=https://docs.sencha.com/extjs/7.0.0/guides/whats_new/release_notes.html|access-date=9 July 2019}}</ref> This version introduced several new components in the Modern Toolkit. The Classic Toolkit received the [[Material Design]] Theme.
==Sencha==
On 15-Jun-2010, the merge of Ext JS with [[JQTouch]] and [[Raphaël (JavaScript library)|Raphaël]] was announced<ref>{{cite web|url=http://www.sencha.com/blog/2010/06/14/ext-js-jqtouch-raphael-sencha/ |title=Ext JS + jQTouch + Raphaël = Sencha &#124; Blog |publisher=Sencha |date=2010-06-14 |access-date=2012-11-19}}</ref> forming a new organisation called Sencha Inc. Ext JS continues to be available as a main product on the new Sencha website<ref>{{cite web|url=http://www.sencha.com/products/extjs/ |title=Industry Leading JavaScript Framework for Building Desktop Web Apps &#124; Sencha Ext JS &#124; Products |publisher=Sencha |access-date=2012-11-19}}</ref> together with [[Sencha Touch]], Sencha GWT (now Sencha GXT), Sencha Architect, Sencha Animator and Ext core.
On 23-Aug-2017, Sencha was acquired by [[Idera Software|IDERA]] (which in turn owns [[Embarcadero Technologies]]). Embarcadero is known for acquisitions of rapid application development software such as [[Delphi (programming language)|Delphi]] (which relies on [[Object Pascal]] as its primary programming language).<ref>{{cite web |url=https://www.sencha.com/company/press/idera-inc-acquires-sencha-to-strengthen-developer-tools-business/ |title=IDERA, Inc. Acquires Sencha to Strengthen Developer Tools Business |last=Diamandopoulos |first=Cybele |publisher=Sencha, Inc. |date=August 25, 2017 |website=sencha.com |access-date=September 12, 2017}}</ref>
==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 [[autocomplete|code completion]], inspection, and suggestion, while cooperating with native JetBrains behavior.
== Ext.NET ==
{{Main article|Coolite}}
Ext.NET is an [[ASP.NET]] component framework integrating the Ext library,<ref>{{cite web|url=http://www.ext.net/ |title=– ASP.NET (WebForm + MVC) component framework integrating the Sencha Ext JS JavaScript Library &#124; ASP.NET Web Components for WebForms and MVC application. Integrates the Sencha ExtJS framework |publisher=Ext.NET |date=2011-09-20 |access-date=2012-11-17}}</ref> 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]]. In April 2008, the [[open source license]] 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.<ref>{{cite web|url=https://www.sencha.com/forum/showthread.php?s=5709a1ee51a8be944e05e6e2272c89c7&p=157466#post157466 |title=License Change? |publisher=Extjs.com |access-date=2022-05-06}}</ref> The Ext authors claim that section 7<ref>{{cite web|url=https://www.gnu.org/licenses/lgpl-3.0.txt |title=GNU Lesser General Public License - Version 3, 29 June 2007 |publisher=Gnu.org |access-date=2012-11-17}}</ref> 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.<ref>{{cite web|url=http://www.sencha.com/forum/showthread.php?33096-License-Change|title=Sencha Forums, ExtJS License Change}}</ref>
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.<ref>{{cite web|url=http://extjs.com/blog/2008/04/21/ext-js-21-and-ext-gwt-10-released-preview-of-ext-js-30/ |title=Ext JS 2.1 and Ext GWT 1.0 released, preview of Ext JS 3.0 &#124; Blog &#124; Sencha |publisher=Extjs.com |date=2008-04-22 |access-date=2012-11-19}}</ref>
The change in license over time, from a permissive open source license to a restrictive dual license, caused controversy in the Ext user community.<ref>{{cite web|author=Monday April 28, 2008 3:08PM by Tim O'Brien in Opinion |url=http://www.oreillynet.com/onjava/blog/2008/04/license_fakeout_hits_extjs_and.html |title=License Fake-out hits ExtJS and Java Service Wrapper: Communities Alienated - O'Reilly ONJava Blog |publisher=Oreillynet.com |date=2008-04-28 |access-date=2012-11-19}}</ref><ref>{{cite web|last=Asay |first=Matt |url=http://news.cnet.com/8301-13505_3-9878693-16.html |title=ExtJS: When open source is not open at all &#124; The Open Road - CNET News |publisher=News.cnet.com |date=2008-02-25 |access-date=2012-11-19}}</ref><ref>{{cite web|url=http://ajaxian.com/archives/ext-js-and-the-fun-with-open-source-licenses |title=Ext JS and the fun with Open Source licenses |publisher=Ajaxian |date=2008-04-26 |access-date=2012-11-19}}</ref><ref>{{cite web|url=http://www.bytestopshere.com/post.cfm/brewing-controversy-surround-extjs |title=Brewing Controversy Surround EXTJS « The Byte Stops Here |publisher=Bytestopshere.com |access-date=2012-11-19}}</ref>
Sencha has published details about its commercial and GPL license terms on its website.<ref>{{cite web|url=http://sencha.com/legal/ |title=Sencha Licensing &#124; Website &#124; Sencha |publisher=Sencha.com |date=2011-01-13 |access-date=2016-05-16}}</ref>
In November 2018 Sencha announced its Community Edition that is free but restricted by annual revenue of either a person or company using ExtJS.<ref>{{Cite web|url=https://www.sencha.com/blog/announcing-sencha-ext-community-edition/|title=Announcing Sencha Ext Community Edition|date=2018-11-06|website=Sencha.com|language=en-US|access-date=2019-12-06}}</ref><ref>{{Cite web|url=https://www.sencha.com/products/extjs/communityedition/|title=Ext JS Community Edition|date=2018-10-31|website=Sencha.com|language=en-US|access-date=2019-12-06}}</ref>
==See also==
{{Portal|Free and open-source software}}
* [[Comparison of JavaScript frameworks]]
* [[Comparison of JavaScript charting libraries]]
*[[JavaScript framework]]
*[[JavaScript library]]
==References==
{{Reflist}}
==Bibliography==
{{refbegin}}
*{{cite book
|first1       = Leslie M.
|last1        = Orchard
|first2       = Ara
|last2        = Pehlivanian
|first3       = Scott
|last3        = Koon
|first4       = Harley
|last4        = Jones
|title        = Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools
|publisher    = [[Wrox Press]]
|edition      = 1st
|page         = 888
|date         = August 31, 2009
|isbn         = 978-0-470-38459-6
|url          = http://www.wrox.com/WileyCDA/WroxTitle/Professional-JavaScript-Frameworks-Prototype-YUI-ExtJS-Dojo-and-MooTools.productCd-047038459X.html
|access-date  = August 15, 2009
|archive-date = July 6, 2011
|archive-url  = https://web.archive.org/web/20110706050324/http://www.wrox.com/WileyCDA/WroxTitle/Professional-JavaScript-Frameworks-Prototype-YUI-ExtJS-Dojo-and-MooTools.productCd-047038459X.html
|url-status   = dead
}}
*{{cite book
|first1    = Shea
|last1     = Frederick
|first2    = Colin
|last2     = Ramsay
|first3    = Steve
|last3     = 'Cutter' Blades
|title     = Learning Ext JS
|publisher = [[Packt|Packt Publishing]]
|edition   = 1st
|page      = 299
|date      = November 28, 2008
|isbn      = 978-1-84719-514-2
|url       = http://www.packtpub.com/learning-ext-js/book
}}
*{{cite book
|first1    = Armando
|last1     = Gonzalez
|first2    = Crysfel
|last2     = Villa
|title     = Learning Ext JS 4
|publisher = [[Packt|Packt Publishing]]
|edition   = 1st
|page      = 434
|date      = 2012-10-08
|isbn      = 978-1-84951-684-6
|url       = http://www.packtpub.com/learning-ext-javascript-4/book
}}
{{refend}}
==External links==
* [https://web.archive.org/web/20070222071857/http://www.extjs.com/ The original Ext JS website by Jack Slocum]
{{ECMAScript}}
{{Application frameworks}}
{{Widget toolkits}}
[[Category:JavaScript libraries]]
[[Category:Ajax (programming)]]
[[Category:Web frameworks]]