Ext JavaScript library

If you're developing a web page/site with JavaScript, you should at least be aware of the Ext JS JavaScript library. Ext functions well as an Ajax library, in addition to a general purpose set of extensions to the JavaScript language and DHTML.

Update (2008-05-03):

Ext JS is suffering a licensing crisis:

• John Resig on ExtJS, the GPL fiasco and open source community style (Stephan Schmidt, 2008-04-28)
• 600+ replies and 55,000+ views on Ext JS's forum thread, License Change?

I'm moving to The Yahoo! User Interface Library (YUI).

Ext's official site is http://extjs.com/. Wikipedia also has an article.

Features

I strongly agree with Bruce Kroeze's review: "Why I'm moving from jQuery to ExtJs". It lists a number of ideals, and Ext meets just about every expectation, where other libraries such as Prototype fall short. Some of these include:

• Respecting the global namespace and base language, without polluting it with numerous function and variable names. (See my Respecting the JavaScript global namespace and JavaScript Closures posts.)
• Performance. (See "CSS Selectors - Speed Myths". Written by the Ext lead developer, so beware of some probable bias.)
• Capable DOM manipulation. (See Ext.Element)
• Capable CSS selectors. (See Ext.DomQuery)
• Capable event listeners / event management. (See Ext.EventManager)

More features as listed from Wikipedia:

• A diverse set of form controls (or "widgets").
• A powerful DOM selector class allowing operations to be performed on elements within the page with a high degree of flexibility.
• Data stores that can be used to contain and manipulate complex sets of data.
• Classes to create and manipulate data in JSON and XML formats.

Demonstrations of many of these features can be seen at the Ext documentation page in the 'Examples and Demonstrations' section.

Issues

While I don't want to discourage anyone from at least trying this capable library, there are a few issues you should at least be aware of:

• Documentation is sometimes a bit over-assuming, especially in terms of initial setup.
  • Viewing the sources of the example pages and searching on the Ext forums are helpful resources.
• A number of the form control / widget features are dependent upon included CSS includes for proper display. Unfortunately, ext-all.css contains the definitions from reset-min.css, which resets almost all margins and paddings to 0, as well as removing a number of other base formatting attributes without providing default alternatives. One consequence of this is that it effectively makes lists and headings appear just as normal text.
  • Jeff Howden of the Ext Support Team posts the following explanation on the Ext forum:
    There are tons of differences in just margin and padding alone on numerous elements between the major browsers. That bit of CSS simply equalizes things. If you have custom CSS styling you wish to apply, simply include that CSS after ext-all.css.
  • See the "ext-all.css defines basic html tags such as p, h1, h2, .." post for the full discussion/explanation.
  • See also the "Sandboxing Ext CSS" forum post.
• The Ext GUI components appear dependent on a given set of font and other formatting options for proper display. Including Ext's ext-all.css file sometimes isn't even enough. Some symptoms I experienced included missing borders under Internet Explorer. See my thread on Ext's user forums for the details.

As for the ext-all.css issue, the best option I've found is to write and include your own "ext-unreset.css" file after the ext-all.css include in your web page. I found referencing the default .css used by Mozilla Firefox to determine some ideal default values is a good start. (Look for res/html.css in your Firefox installation directory.)

Forums

I've made (and probably will continue to make) a number of postings on the Ext user forums that may be of some interest. If you'd like to search for them, my username is "ziesemer". The forum's PHP search action seems a little odd, but this link seems to return a list of my posts: http://extjs.com/forum/search.php?searchuser=ziesemer&do=process.