The DateField is a perfect example. Handling dates within most HTML forms can be a chore, but Ext JS provides a very basic component for handling dates:

Example 1:ch14ex1.js

Ext.onReady(function(){
var formPanel = new Ext.form.FormPanel({
title:'DateField Example',
applyTo:'chap14_ex01',
layout:'form',
labelAlign:'top',
width:210,
autoHeight:true,
frame:true,
items:[{
xtype:'datefield',
fieldLabel:'Date of Birth',
name:'dob',
width:190,
allowBlank:false
}]
});
});

What we have here is a basic FormPanel layout, that puts our DateField into proper context and allow for certain necessary attributes (like putting our label above the field). Within the layout we have a single DateField component. On initial load, it looks like a basic TextField, with the exception of the trigger to the right. Clicking the trigger shows the beauty of Ext JS's consistent component "look-and-feel", displaying an attractive calendar layout for the selection of a date. You can select a day, move from month-to-month, or even click on the month itself to choose a different month and year.

Apart from its rich display, the DateField also provides a rich set of attributes for specialized customization, including the ability to determine different accepted date formats, and the ability to disable entire blocks of days. The component will also automatically validate manually-entered data.

Dealing with time can be more difficult than dealing with dates, but Ext JS, again, provides a component to assist us. The TimeField is, ultimately, a basic ComboBox that will automatically show a set of time, in increments that we want, for quick selection:

Example 2:ch14ex2.js

Ext.onReady(function(){
var formPanel = new Ext.form.FormPanel({
title:'DateField Example',
applyTo:'chap14_ex02',
layout:'form',
labelAlign:'top',
width:210,
autoHeight:true,
frame:true,
items:[{
xtype:'timefield',
fieldLabel:'Time',
minValue: '9:00 AM',
maxValue: '6:00 PM',
increment: 30
}]
});
});

As in our last example, this simple FormLayout contains one item, in this case the TimeField. Click on the trigger, and we get our options, defined by our code as times between 9 AM and 6 PM in increments of 30 minutes. Other configuration options allow you to define multiple accepted time formats, and also implement custom validation. Basic validation is provided by default.

The NumberField doesn't look very special—it's just a basic 'text' field. What makes it special is how it allows us to 'dummy-proof' our Ext JS applications. Client-side data validation is essential for ensuring data integrity prior to sending values to the server, allowing us to prevent errors from our remote procedure calls. Components such as this one simplify that process for us. The NumberField provides automatic keystroke filtering and validation to allow the entry of only numeric data, allowing us to specify whether it can take negative numbers or float values, and even specify how many decimal places are accepted.

Ext JS 2.2 brought two new form controls: the CheckboxGroup and the RadioGroup. These controls allow us to 'group' sets of checkbox or radio buttons, providing them with custom formatting and special, group-level validation capabilities. For example, say we have a form with two checkboxes for the users to select their gender. By placing these within a CheckboxGroup, we can apply our validation to the group so that at least one option is selected when the form is submitted. We can apply many more complex validation rules as well, depending upon the scenario. See the Ext JS API for more details.

Ext JS includes a nice, limited, WYSIWYG HtmlEditor, to drop right into your forms:

Example 3:chapter14_03.js

Ext.onReady(function(){
var formPanel = new Ext.form.FormPanel({
title:'HtmlEditor Example',
applyTo:'chap14_ex03',
layout:'form',
labelAlign:'top',
width:600,
autoHeight:true,
frame:true,
items:[{
xtype:'htmleditor',
id:'bio',
fieldLabel:'Blog Entry',
height:200,
anchor:'98%'
}]
});
});

Here we dropped the HtmlEditor into our FormLayout for a quick demonstration. The HtmlEditor is applied to a basic text area, in much the same way as other WYSIWYG editors, say FCKEditor or TinyMCE. We have the ability to enable or disable the various menu buttons related to formatting, as well as call various methods (like those to get or set the text of the editor, its position, and so on), or apply event listeners, just like the other components of Ext JS.

We get the same, consistent Ext JS look and feel, while giving our users the ability to format their own content directly from within our applications. In this image, note that the HtmlEditor uses Ext JS's built in ColorPalette component for selecting colors.

The String object has been extended to provide several formatting options, including the format() method. This simple method allows you to return a formatted string of text, with the first parameter being the string to return, and all other parameters (as many as you like) being bound to pieces of the string, using a basic form of binding expression, whereby curly braces surround a variable reference. Typical binding expressions, used by Ext JS, would contain a dot-notated variable reference surrounded by curly braces (that is, {this.firstName}), but this instance will bind values to the arguments that will follow using their array order:

Example 4:chapter14_04.js

Ext.onReady(function(){
var cls = "Band";
var member = {
firstName: 'Eric',
lastName: 'Clapton',
position: 'Lead Guitarist'
};
var pnl = new Ext.Panel({
applyTo: 'chap14_ex04',
width: 200,
height: 100,
bodyStyle: 'padding:5px',
title: 'Band Member',
html: String.format('<div class='{0}'>{2}, {1}: {3}</div>', cls, member.firstName, member.lastName, member.position)
});
});

This small block of code displays a simple Panel element, which calls the formatting function to build the HTML of the Panel. The format() method's arguments are applied to different parts of the string that we are building.

The Date object has also been extended to provide additional formatting and parsing capabilities. The API provides a complete listing of the date part identifiers that can be used when parsing a string into a Date object, or when outputting a Date object in the desired format:

Example 5:chapter14_05.js

Ext.onReady(function(){
var cls = "Band";
var member = {
firstName: 'Eric',
lastName: 'Clapton',
position: 'Lead Guitarist',
birthDate: new Date('03/30/1945')
};
var pnl = new Ext.Panel({
applyTo: 'chap14_ex05',
width: 200,
height: 100,
bodyStyle: 'padding:5px',
title: 'Band Member',
html: String.format('<div class='{0}'>{2}, {1}: {3}<br />DOB: {4}</div>', cls, member.firstName, member.lastName, member.position, member.birthDate.format('F j, Y'))
});
});

We've extended our previous example to add Eric's birthday. We've created a new Date object, as part of the Member object, and then used the format() method of the Date object to format our date for display.

The Ext.util package provides many different classes and methods for formatting various types of data, including many for working with strings, dates, and numbers. A good example is the usMoney() method:

var annualSalary = 123456.345;
Ext.util.Format.usMoney(annualSalary);

This will return a pre-formatted US currency string of $123,456.35. This can come in very handy when working with e-commerce applications. This is only one of the many methods within the classes of the Ext.util package.

Another common function is the ability to strip HTML from a string. Say we have a simple comment form on our page, and want to ensure that the user doesn't include any HTML in the input, so that our data isn't polluted before going to the server. Ext JS includes a simple method for stripping out HTML from any string:

var firstName = '<b>jimi</b>';
var adj = Ext.util.Format.stripTags(firstName);

We may also want to make sure that a particular input, say a name, is capitalized before we pass it back to the server:

var adj2 = Ext.util.Format.capitalize(adj);

We may also want to apply a default value to a variable in case one does not exist already:

var adj3 = Ext.util.Format.defaultValue(favoriteBlog, 'Cutter's Crossing');

These are just a few of the many formatting methods that are available within the Ext JS library. A thorough review of the API will provide you with a full understanding of everything that is available.

The Ext.state.Manager class is automatically checked, and utilized, by every state-aware component within Ext JS. With one simple line of code we can set this manager in place, and with little or no additional work, our application's view state is automatically registered.

To put this in perspective, suppose that we have a rather large application, spanning many different HTML documents. Ext JS plays a part in the application, because we've implemented a data grid for displaying users. While we work on our grid, it may be necessary to change the sort order from the default LastName column to an unlikely column, say the UserName column. Now let's say we had to go into an inventory editor for a moment. If we use the Manager, when we return to the user editor our grid will automatically come up sorted again by Username, as that was the last state change that we made:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

This line creates our state Manager, setting the provider to a CookieProvider. What this means is that the application state is saved to a value within a cookie on the client machine, which in turn is read to re-enable the state upon returning to a state-aware component.

Many Ext JS applications will be confined to a single HTML page, and might commonly come down to a collection of Ext JS Window objects on the screen. But what happens if a user is in one window, and we want to show them another window that is already open, without closing the one they've been working on? By default, all Ext JS windows are created, and registered, within the global WindowGroup. We can easily control the state of these windows by using the WindowMgr class. This manager class allows us to grab any window of a WindowGroup, and bring it to the front, send it to the back, or even hide all of the windows in the group.

One common problem among Rich Internet Applications is handling the Back button of the browser. Say we have a large Ext JS based application with Tabs, Grids, and Accordions. A user, navigating our application by using these components, might hit their Back button to go back to their last action, or screen, or panel. This is expected behavior in most Internet applications, because most Internet applications go from one HTML page to another.

But most Rich Internet Applications, like those built with Ext JS, are usually a collection of different states within the same HTML page, and the Back button would typically take a user out of our application and back to the last viewed HTML page. Thankfully, Ext JS 2.2 (the latest library update, as of this writing) introduced the History class, giving us the ability to control how the browser history is used, and how the browser's Back button would be handled within our applications.

The first task when manipulating the DOM(Document Object Model) is to find what we're looking for. The DomQuery class provides us with several methods for this purpose, including returning entire groups of DOM nodes that meet specific criteria, or selecting a single node by its selector. We can even start the search from a specific node in the page. There are several different selector types that can be used when searching for a specific element:

What's more, we can chain together a series of selectors to find the exact element we're searching for:

var myEl = Ext.DomQuery.selectNode ('a.iconLnk[@href*="cutterscrossing"]:first');

This will return the first anchor element with a class name of iconLnk that contains 'cutterscrossing' within its href attribute:

The DomHelper class allows us to manipulate the DOM of the rendered page on the fly. Whether we want to add a new element below a collection of others, remove a specific element, or even overwrite the body content of an element, the DomHelper class contains the methods that can accomplish the task:

Ext.DomHelper.insertAfter(ourGrid, newForm);

This line will place the newForm object directly after ourGrid in the current page's DOM. You could just as easily use insertBefore() to place the form before the grid. You could even use insertHtml() to insert a block of HTML into the DOM with a particular relation to a specific DOM element. A thorough review of the API will give you a complete view of the power of the DomHelper class.

The DomHelper class also provides a simple method for setting the style of an individual element, through the use of the applyStyles() method. But sometimes we may need to change the style sheet of our entire document. For this, Ext JS has the Ext.util.CSS class, which allows us to create a new stylesheet that will automatically be appended to the Head of our document, remove entire stylesheets, or swap one stylesheet for another. We can even act upon their entire set of rules:

Ext.util.CSS.swapStyleSheet('defaultDisplay','print.css');

This little script will swap out the current stylesheet, which is identified by the link tag's id attribute, and replace it with the print.css stylesheet.

Building on the DateField class, the DatePickerPlus provides multi-calendar displays, allowing a user to select a range of dates. There are multiple configuration options available, and the level of control available to the developer is very comprehensive.

The PowerWizard class allows us to create powerful, multi-step 'wizard-like' processes, with field (and multi-field) validation and decision trees, as well as data persistence between frames.

Yes, for those times when the HtmlEditor just isn't enough, someone wrote a custom extension to wrap the TinyMCE WYSIWYG editor into the Ext JS applications.

How many times would it have been nice to be able to upload more than one file at a time through our web application interface? Someone converted the popular SwfUpload project into a custom Ext JS component, allowing multi-file uploads from within our application.

The built-in ColorPalette component can seem rather limiting, only showing a few of the colors available for web display. For this reason, there is the ColorPicker giving the user the option of selecting any color they wish.

These are just a few of the outstanding community contributions to the library. There are many more available through the Community Extensions section of the Learning Center area of the Ext JS website, as well as throughout the Forums (Checkout the Ext: User Extensions and Plugins topic for more).

The Samples and Demos area of the Ext JS site (http://extjs.com/deploy/dev/examples/samples.html) will likely be the first real exposure that anyone has to the power of the Ext JS library. These small samples are broken down into various categories, providing us with solid examples of how to use many of the components of Ext JS. With easily-accessible source code, we can see exactly what it takes to write this type of functionality for our own applications.

The Ext JS interactive API (http://extjs.com/deploy/dev/docs/) is an outstanding resource, giving us access to the underlying properties, methods, and events that are available within each class of Ext JS. Peppered throughout are additional code samples to illustrate their use. The Ext JS team even provides a desktop AIR version of this API browser, so that we can have it available offline.

The Forums for Ext JS (http://extjs.com/forum/) show what an active community there is, developing the Ext JS library. With over 40,000 threads and more than 200,000 posts, this is the place to ask questions. Topics range from the very easy to the ultra-advanced, and members of the core Ext JS development team are frequent contributors.

Step-by-Step Tutorials(http://extjs.com/learn/Tutorials) can be found within the Learning Center, with content ranging from simple component usage to advanced project development. Some of these tutorials come directly from the Ext JS development team, but many are contributed by members of the Ext JS community.

One can also find the Ext JS Community Manual within the Learning Center. This wiki-style development manual is maintained by the Ext JS community itself, and contains topics relating to most of the aspects of Ext JS development.

We can find resources for Ext JS all over the Internet. One good example is from Spket Studios (http://www.spket.com/), makers of the Spket IDE. This free IDE comes as a plug-in for the Eclipse development platform. With a few simple steps, Spket can provide complete code introspection for our Ext JS classes and extensions, as well as in-depth code assistance. It even has a built-in theme builder to automatically create new skins for your components.

Aptana Studio is quickly becoming a major contender in the web-based IDE market. Even the free version provides code introspection and assistance with multiple JavaScript libraries, built-in wizards for creating Adobe AIR applications, built-in debugging tools, and much more.

Yes, Google (or any other search engine) is a fantastic resource, because there are thousands of articles, tutorials, and blog posts available. A quick search on "Ext JS" brings up over a million possible matches, and that's growing every day.