Ext JS by George Hernandez

Intro
Miscellany
Links

Intro

Exploring the Ext JS library, an open source Javascript library for making web apps using AJAX, DHTML, and the DOM. First of all, the name: The name is actually "Ext" but "Javascript" or "JS" is so frequently appended to it that Ext is often referred to as "ExtJS", "Ext JS", or some similar variation. Their branding problems are also a bit confused since the product is "Ext" but the official site is extjs.com. FYI: I've talked with Ext folks on the phone and they say "E.X.T." as opposed to "Ext".

I'm a late comer to Ext (I started just as Ext 2.0 beta came out 2007-10), but I'm using Ext at work. The product itself is very nice in execution and design, but the documentation is weak: The API documentation is minimalist; The manual and tutorials are community-generated wiki pages; The forum is chancey; The demos are good. I've found that I have to go over everything in order I'm going to use this page to store various little notes on Ext. Initially I'm going to just dump stuff here and hopefully I'll organize it later.

Ext is essentially a Javascript library that you include on the client-side. You can use it to do "tricks" with the DHTML and the DOM, but I think its main attraction is in how you can create cross-browser forms with very powerful features (including AJAX pulls and saves, grids, tabs, trees, and layout control) fairly simply. Basic Ext usage involves configuring their classes with a lot of JavaScript Object Notation (JSON) and functions for event handling. However, as with many things, there are many ways to do the same thing.

Top level structure of all 175 classes in Ext v 2.0 as of 2007-12 according to package:

Global (6). These are extensions to some classes that are part JavaScript (Array, Date, Function, Number, and String) as well as the Ext class itself.
Ext extension classes (58)
Ext.data (17)
Ext.dd (12). Drag and drop.
Ext.form (19)
Ext.grid (14)
Ext.layout (12)
Ext.menu (12)
Ext.state (3)
Ext.tree (13)
Ext.util (9). Some nice ones including Ext.util.Format (with the 8 corners: tl, t, tr, r, br, b, bl,and l).

56 classes are direct extensions of the generic Javascript Object class. 20 classes are direct extensions of the Ext.util.Observable class (an "abstract base class that provides a common interface for publishing events", i.e. it provides a consistent way to provide events for its subclasses.).

Rough class hierarchy chart for some of the more important Ext classes:

Ext. This singleton class has many member that are frequently.
Ext.DomQuery. This singleton class enables selecting elements via XPath queries.
Ext.Element. Represents an Element in DOM.
Ext.MessageBox. This singleton class is like a super JavaScript alert.
Ext.Fx. Basic animation and visual effects.
Ext.Template. An HTML fragment
Ext.Action. Reusable functionality that can be shared by multiple components.
Ext.ProgressBar
Ext.Component. The base class for all Ext components. Handles component creation, rendering, events, state, and destruction. Every component has a specifi xtype. Not usually used directly.
- Ext.BoxComponent. Handles cross-browsing boxing. Not usually used directly.
  - Ext.Container. Extends any Ext.BoxComponent that can contain other components. Usually configured with a layout from the Ext.util package. Not usually used directly.
    - Ext.ViewPort. The viewable area in the browser.
    - Ext.Panel. Can be dropped into a container. Typically has features like toolbar, header, footer, and body. Not usually used directly.
      - Ext.Tip. Tooltips
      - Ext.Window. An app window, like commonly found in operating system.
      - Ext.Tab Panel.
      - Ext.grid.GridPanel. As in a data grid.
      - Ext.tree.TreePanel
      - Ext.form.FormPanel
      - Ext.form.FieldSet. For grouping form fields.
Ext.Store. Stores a client-side cache of Record objects. An Ext.Store object should have a proxy and reader set.
- A proxy reads the data:
  - The proxy type indicates how to read the data.
  - The url indicates where to read the data.
  - The method indicates the means to read (usually GET or POST).
- A reader breaks the data into columns.
Typical components that can be data bound to an Ext.Store:
- Ext.grid.GridPanel
- Ext.form.ComboBox. And most of the classes in Ext.form.
- Ext.DataView. For custom layouts using Ext.XTemplate.

Miscellany

Renderers can use 2nd parameter to get any property that was configured in the column model. EG: this.config[colIndex].anyProperty.
When you create a record, sometime you need to explicitly specify the type for proper sorting. The types are: auto, string, int, float, boolean, date. See Ext.data.Record [http://extjs.com/deploy/dev/docs/?class=Ext.data.Record]
A panel-like Ext component usually has its layout property set if it contains items and is not a tab panel.

Ext JS

Intro

Miscellany

Links