Sencha Inc. | HTML5 Apps

Overview of Ext JS

Published Oct 23, 2010 | The Sencha Dev Team | Tutorial | Easy
Last Updated Jul 11, 2011

This Tutorial is most relevant to Ext JS, 2.x, 3.x.

This article is currently due for review
We suspect that this article may be out-of-date or contain incorrect information.
But we are constantly editing articles, so we promise we will get to this one soon.

What is Ext JS all about?

Ext JS is a client-side, JavaScript framework for building web applications. In early 2006, Jack Slocum began working on a set of extension utilities for the Yahoo! User Interface (YUI) library. These extensions were quickly organized into an independent library of code and distributed under the name "yui-ext." In the fall of 2006, Jack released version .33 of yui-ext, which turned out to be the final version of the code under that name (and under the open source BSD license). By the end of the year, the library had gained so much in popularity that the name was changed to Ext JS, a reflection of its maturity and independence as a framework. A company was formed in early 2007, and Ext JS is now dual-licensed under the GPL and a commercial license. The library officially hit version 1.0 on April 1, 2007.

Sencha is the company that makes Ext JS (and other frameworks including Ext GWT and Sencha Touch). The company name used to be the same as the popular framework, therefore the company name was changed to Sencha in 2010.

How is Ext JS licensed?

Please take a look here.

What server platforms are compatible with Ext JS?

As a client-side framework, Ext JS can run against any server platform that can process POST requests and return structured data. Common choices include PHP, Java, .NET and many more. There are server-side frameworks available for most popular platforms that will make your life much easier when programming under the AJAX application model that Ext JS uses.

What other libraries are required to run Ext JS?

Up until version 1.0.1a, Ext JS required one of the following base libraries to be included: YUI, jQuery or Prototype/Script.aculo.us. Ext JS contains adapters that provide some of the basic plumbing utilities from those libraries, including Ajax support, animation, DOM manipulation, event handling, etc. Beginning with version 1.1, Ext JS includes a native Ext adapter, so the external libraries are no longer required.

Your choice of base libraries/adapters will most likely be driven by whether or not you already use an external library for something that Ext JS does not provide. For example, YUI includes some components like a history manager that Ext JS does not provide. (Ext JS 2.2 now has a history component) In that case, you may want to include the YUI adapter. Or if you have already invested in a library in an existing application, but want to add Ext JS to it, you might consider the adapter for that library to keep the code size smaller. If you do not have either of those needs, the Ext adapter will provide the smallest footprint and most compatible support. Note: since the non-Ext adapters rely on external libraries, not all functions are guaranteed to be supported or bug-free.

What is the proper include order for my JavaScript files?

This same list is also included with the Ext JS download in the root folder in a file called INCLUDE_ORDER.txt. All Ext adapter files (and ext-base.js) can be found in the \adapters folder in the release. The libraries are listed in order of recommendation. Note: At the present time, Prototype/Scriptaculous support should still be considered experimental as there are several known bugs and unsupported functions that can cause problems with Ext.

Base LibraryInclude OrderGet Library
Ext JS Standaloneext-base.js
ext-all.js (or your choice of files)
http://www.sencha.com/download
Yahoo! UI (.12+)yui-utilities.js (or your choice of YUI base files)
ext-yui-adapter.js
ext-all.js (or your choice of files)
http://developer.yahoo.com/yui/
jQuery (1.1+)jquery.js
jquery-plugins.js // required jQuery plugins
ext-jquery-adapter.js
ext-all.js (or your choice of files)
http://jquery.com/
http://docs.jquery.com/Plugins
Prototype (1.5+) /
Scriptaculous (1.7+)
prototype.js
scriptaculous.js?load=effects (or whatever you want to load)
ext-prototype-adapter.js
ext-all.js (or your choice of files)
http://www.prototypejs.org/
http://script.aculo.us/

Note for YUI users: Ext JS already includes yui-utilities.js, which is a convenience file containing the base YUI utilities (YAHOO, Event, Dom, Animation and Connection). If you do not otherwise use YUI, this should be sufficient for your needs — it is not guaranteed to be up-to-date with the most current release of YUI, but it is guaranteed to work correctly with Ext. If you need something in the most current release of YUI, you may need to supply your own copy of the utility files that you need.

Are there known compatibility issues with any of the third-party adapters?

  • Certain animation effects (like highlight in particular) are known not to run properly under the jQuery or Prototype adapters as of Ext JS 1.1. This currently appears to be a bug in the Ext adapter implementation for these effects related to ignoring the from parameter. References: 1, 2
  • DatePicker month navigation links stop working after a few clicks under jQuery. This is a jQuery bug that is being addressed by them for their next release. References: 1, 2
  • Script tags can get incorrectly stripped when doing Ajax updates using the Prototype adapter. This is a known Prototype issue. References: 1

Where is the source code and how to access to SVN?

As specified here: Regarding SVN. Access to the Ext JS SVN (Subversion) repository is available to support subscribers only. The only source code that you can download is the latest code officialy released by the Sencha team and is accessible here.

Share this post:
Leave a reply

Written by The Sencha Dev Team

Commenting is not available in this channel entry.