JAVASCRIPT

EXT JS 2.1 Overview

EXT JS is a feature-packed and cross-browser RIA framework built from JavaScript and CSS that seriously reduces the development time of Web 2.0 applications. It was originally built as an extension of the popular YUI library. In this article we take a close look at its features and what you can do with it.

Author Info:

By: Dan Wellman

Poor Best

Rating:

/ 9

July 07, 2008

TABLE OF CONTENTS:

Utility	Usage
ClickRepeater	A wrapper that can be applied to any element to enable the dispatch of click, mousedown and mouseup events, bringing the power of click interaction to any and all HTML elements.
CSS	A singleton component that allows for effective CSS manipulation. Contains methods for creating or removing, or dynamically changing, style sheets and for getting or updating individual CSS rules.
Date	A helper class for formatting and working with dates programmatically. It vastly improves the set of date methods native to JavaScript.
DelayedTask	Provides a convenient way of working with JavaScript's setTimeout method.
Format	A singleton that provides data formatting services. This class also contains many useful methods for working with all kinds of data from strings to numbers.
JSON	Provides methods for encoding and decoding JSON. Derived from Doug Crockford's json.js
KeyMap	The KeyMap class allows you to define callback functions for many of the keys on your keyboard that are bound to different elements on your page.
KeyNav	Use the direction keys on your keyboard to provide custom keyboard navigation schemes.
MixedCollection	Stores other objects and maintains numeric indices and keys.
Observable	Provides a common interface for working with events.
TaskMgr	Singleton class that is used to start and stop other tasks.
TextMetrics	This singleton allows you to quickly and easy determine the pixel height and width of any specified block of text.
XTemplate	Allows for the creation of advanced templates used to store and represent different types of information.

There are many other utilities and classes that make up the library, but these are the ones that you'll find within the utils directory in the unpacked library structure.

Widgets make up another huge collection of classes and components in the library. These are defined objects that provide a particular feature and can be implemented quickly and easily out of the box. The widgets available at present are:

Widget	Usage
Action	Allows you to define a particular action and share it across multiple library components. Configuration objects, UI updates and event handlers are also shared.
BoxComponent	Used by any of the library components that sit in a box like container.
Button	Allows you to create advanced button objects and work with them effectively using the huge range of methods, properties and events exposed by this class.
ColorPalette	Creates a simple interface for choosing a color.
ComponentMgr	Allows you to access any component on the page via a registry of active components.
Component	Base class for all types of library components.
Container	A base class for all containers that can hold library components.
CycleButton	The CycleButton is a special type of split button that contains a menu and cycles through each menu item each time the button is clicked.
DataView	A specialized component used to display and format data. Supports a variety of data stores used as the source for the data.
DatePicker	A simple calendar interface for selecting dates.
Editor	A basic editor used to capture extended textual input.
Form	Lets you create advanced and highly styled forms quickly and easily.
Grid	Lets you create highly advanced data grids with built-in support for column sorting, pagination, dynamic data population and much more.
Layer	Add shadows and shims to elements.
Layout	Lets you create advanced layouts, such as accordions and columns
LoadMask	This widget masks components while they are loading data.
Menu	Lets you create a variety of powerful and attractive menus.
MessageBox	Generates different types of message boxes.
PagingToolbar	Provides automatic pagination to multipage data displays.
PanelDD	A draggable panel container similar to an OS window.
Panel	A non-draggable panel container.
ProgressBar	An attractive and highly configurable widget for displaying the progress of different actions.
Resizable	Instantly makes any element resizable through the addition of resize handles.
Shadow	A simpler version of Layer that adds a shadow to any element.
Slider	A slider component with advanced functionality built in.
SplitButton	Provides a button which can expand with a submenu.
StatusBar	Added to the bottom of any type of panel; used to show icons and text.
TabPanel	Creates a basic tabbed interface for showing and hiding information.
Toolbar	Lets you easily create attractive and effective toolbars.
Viewport	This is a specialized container which automatically sets itself to the dimensions of the viewable area of the page.
WindowManager	Manages groups of windows.
Window	A floating panel.

As you can see there are many, many components which you can put to good use in your own applications. Instead of providing a few widgets that can be used to enhance applications, EXT JS is a foundation from which entire applications can be built. There are many more components and classes used by the library for other advanced features such as AJAX.

Next: Documentation and Examples >>