Ext JS 3.0 Cookbook

In the world of Rich Internet Applications (RIA) development, Ext JS stands out as a
cross-browser JavaScript library that offers the applications developer a powerful toolset.
With a set of customizable user interface widgets similar to those found in desktop
operating systems, an effective data binding model, a comprehensive programming
interface for manipulating the Document Object Model and communicating with the
server, a committed development team, and an enthusiastic users’ community, the Ext JS
library is a great choice for today’s web builders.

This book addresses many of the library’s features, from the perspective of how
they can be used to solve the real-world challenges faced by those that develop
internet applications.

What This Book Covers

Chapter 1—The DOM and Data Types, the Ext JS way, covers the Ext JS facilities for
working with different browsers, the Document Object Model (DOM), and the Ext JS
data types. Its recipes will teach you how to detect browsers and platforms, manipulate
the DOM, encode and decode JSON and URL data, and work with arrays, strings,
numbers, and dates. In this chapter you will also learn how to augment the features
of the Ext JS classes, as well as how to incorporate library features into your own
JavaScript classes.

Chapter 2—Laying Out a Rich User Interface, will help you to learn how to use layouts to
create user interfaces with the Ext JS widgets. This chapter explains the common uses of
some of the library’s native layouts, and teaches you how to combine and augment these
layouts to build great-looking and functional interfaces.

Chapter 3—Load, Validate, and Submit Forms, focuses on forms processing. In this
chapter you will find tips and techniques for effective field validation, details on how to
load data into forms, as well as advice on how to use forms to upload files to the server.
As in previous chapters, in Chapter 3 you will find examples of how to extend the
library’s classes, in particular, how to create custom form fields.

Chapter 4—Fun with Combo Boxes and Date Fields, is a continuation of the form fields
recipes introduced in Chapter 3. Chapter 4 is loaded with examples of how to use the
ComboBox and DateField form components. It will teach you how to take advantage of
ComboBox features like paging and item templates, as well as how to safely capture
master-details and dates range input.

Chapter 5—Using Grid Panels to Display and Edit Tabular Data, consists of recipes that
encompass the display of data using Ext JS grid panels. They explain different
approaches to loading, editing, and saving data, as well as looking at how to implement
features like grouping and group summaries. Chapter 5 uses techniques introduced in
Chapter 3 to teach you how the Ext JS GridPanel widget can be enhanced through the use
of plugins.

Chapter 6—More Applications of Grid and List views, expands on Chapter 5’s examples.
It explains multiple ways to use the GridPanel widget to display master-details
relationships, approaches to displaying tabular data more efficiently, and how to edit data
with the new RowEditor class.

Chapter 7—Keeping Tabs on your Trees, explores the TabPanel and Treview widgets.
Besides how to use their main features, in this chapter you will also learn how to take
advantage of plugins to enhance these widgets. This chapter also teaches you how to
implement usage scenarios involving drag-and-drop and master-details displays with tree
views and panels.

Chapter 8—Making Progress with Menus and Toolbars, consists of recipes that examine
the commonly-used menu items, as well as the different ways to set up toolbars and
progress bars in your applications.

Chapter 9—Well Charted Territory, consists of recipes that explain the typical usage
scenarios of the chart widget, as well as approaches to configuring and customizing the
look of the slider widget.

Chapter 10—Patterns in Ext JS, provides examples of some important design patterns
used to build robust and flexible applications. These examples cover techniques such as
resource management using lazy instantiation, prototyping and encapsulating using code
modules and pre-configured classes, dependency management with publish/subscribe
models, and state preservation.

Load, Validate, and Submit Forms

You will learn the following recipes in this chapter:

• Specifying the required fields in a form


• Setting the minimum and maximum length allowed for a field’s value


• Changing the location where validation errors are displayed


• Deferring field validation until form submission


• Creating validation functions for URLs, email addresses, and other types of data


• Confirming passwords and validating dates using relational field validation


• Rounding up your validation strategy with server-side validation of form fields


• Loading form data from the server


• Serving the XML data to a form


• Using forms for file uploads


• Building friendlier forms using text hints

Introduction

This chapter focuses on the topic of processing forms. The journey will include client-side
and server-side field validation, form loading, submission, field customization, and layout
techniques that will make it a breeze to build great-looking and friendly forms.

Specifying the required fields in a form

This recipe uses a login form as an example to explain how to create required fields in a form.

How to do it…

1. Initialize the global QuickTips instance:
   
   Ext.QuickTips.init();


2. Create the login form:
   

   
   
   	var loginForm = { xtype: ‘form’,
   
   		id: ‘login-form’,
   
   		bodyStyle: ‘padding:15px;background:transparent’,
   
   		border: false,
   
   		url:’login.php’,
   
   		items: [{
   
   			xtype: ‘box’,
   
   			autoEl: { tag: ‘div’,
   
   				html: ‘<div class=”app-msg”>
   
   					<img src=”img/magic-wand.png” class=”app-img” />
   
   					Log in to The Magic Forum</div>’}
   
   		},
   
   		{ xtype: ‘textfield’, id: ‘login-user’,
   
   			fieldLabel: ‘Username’,
   
   			allowBlank: false
   
   		},
   
   		{ xtype: ‘textfield’, id: ‘login-pwd’,
   
   			fieldLabel: ‘Password’,
   
   			inputType: ‘password’,allowBlank: false
   
   		}],
   
   		buttons: [{
   
   			text: ‘Login’,
   
   			handler: function() {
   
   				Ext.getCmp(‘login-form’).getForm().submit();
   
   			}
   
   		},
   
   		{
   
   			text: ‘Cancel’,
   
   			handler: function() {
   
   				win.hide();
   
   			}
   
   		}]
   	}
   
   



3. Create the window that will host the login form:
   

   
   
   	Ext.onReady(function() {
   
   		win = new Ext.Window({
   
   			layout: ‘form’,
   
   			width: 340,
   
   			autoHeight: true,
   
   			closeAction: ‘hide’,
   
   			items: [loginForm]
   		});
   
   		win.show();
   
   	});
   
   

How it works…

Initializing the QuickTips singleton allows the form’s validation errors to be shown as
tool tips. When the form is created, each required field needs to have the allowblank
configuration option set to false:

	{ xtype: ‘textfield’, id: ‘login-user’, fieldLabel: ‘Username’,

		allowBlank: false

	},

	{ xtype: ‘textfield’, id: ‘login-pwd’, fieldLabel: ‘Password’,

		inputType: ‘password’,allowBlank: false

	}

Setting allowBlank to false activates a validation rule that requires the length of the field’s
value to be greater than zero.

There’s more…

Use the blankText configuration option to change the error text when the blank validation
fails. For example, the username field definition in the previous code snippet can be changed
as shown here:

	{ xtype: ‘textfield’, id: ‘login-user’, fieldLabel: ‘Username’,

		allowBlank: false, blankText:’Enter your username’

	}

The resulting error is shown in the following figure:

Validation rules can be combined and even customized. Other recipes in this chapter explain
how to range-check a field’s length, as well as how to specify the valid format of the field’s value.

See also…

• The next recipe titled Setting the minimum and maximum length allowed for a field’s
  value explains how to restrict the number of characters entered in a field


• The Changing the location where validation errors are displayed recipe, covered later
  in this chapter, shows how to relocate a field’s error icon


• Refer to the Deferring field validation until form submission recipe, covered later
  in this chapter, to learn how to validate all fields at once upon form submission,
  instead of using the default automatic field validation


• The Creating validation functions for URLs, email addresses, and other types of data
  recipe, covered later in this chapter, explains the validation functions available in
  Ext JS


• The Confirming passwords and validating dates using relational field validation
  recipe, covered later in this chapter, explains how to perform validation when the
  value of one field depends on the value of another field


• The Rounding up your validation strategy with server-side validation of form fields
  recipe, covered later in this chapter, explains how to perform server-side validation