Ext JS 3.0 Cookbook: Clear step-by-step recipes for building impressive rich internet applications using the Ext JS JavaScript library

Components layout is one of the most important areas of the Ext JS library. This chapter teaches you how to create different layouts that the Ext JS library provides, and informs you about their most common uses. You will also be introduced to creating custom reusable layouts that can meet the most demanding requirements of your applications.

Sometimes, you need to position components using the standard X and Y coordinates. In this recipe, I position two panels in the container using an absolute layout. The following screenshot shows how the end result will look like:

Having components that maintain their proportions when their containers are resized is important, especially, when dealing with form elements.

In the following screenshot, there are three panels that resize themselves as their container is resized:

Countless applications use a layout where multiple panels are positioned in an expandable accordion style, such that only one panel can be open at any given time. This recipe is a sample that tries to borrow the look of popular email applications to explain how to configure and use an accordion layout.

The Wizard style UI is perfect when you need to lead the user through a series of steps in a specific sequence. Wizards are especially suited for complex or infrequently performed tasks, where the user is unfamiliar with the steps involved. In the following screenshot, you'll see what the Wizard style UI built in this recipe looks like:

A tabbed GUI is modeled on the traditional card tabs or card indexes. It makes your screens easier to understand and navigate, and gives the application a more natural look. This recipe helps you to build a panel with three tabs, as shown in the following screenshot:

There are times when you want a component to automatically expand and fill its container. In the following screenshot, you'll see how a panel can be made to take up the whole browser window using a FitLayout layout manager:

Multicolumn layouts are pervasive today. They are a favorite choice when there is a need to display complex data, or to have an organized and easy-to-navigate GUI. This recipe explains how to set up this type of layout with Ext JS, as shown in the following screenshot:

If you have remained faithful to HTML tables, then you are in luck! Ext JS provides a layout manager—TableLayout—whose basic building concept is conceptually similar to building an HTML table.

This is how you can create a complex table layout with cells that span multiple rows or columns. In the following screenshot, you'll see what the end result looks like:

This layout is very popular in modern applications where the GUI consists of multiple nested panels with split bars and collapsible regions. Here's a sample that you can use as a foundation for your applications as seen below:

Some applications have special layout requirements that cannot be met by the native Ext JS layouts. Luckily, you can extend these layouts and add the features that you need.

As an example, this recipe explains how to build a custom layout based on the column layout's features. This custom layout will allow you to separate each of the columns with a configurable distance. For example, a sample three-column ColumnLayout layout would look like this by default:

But when using this recipe's custom layout, the same sample allows for user-defined space between columns:

This recipe explains how you can build a reusable Ext JS component that encapsulates one of the most popular GUI styles—a three-panel layout. Using the component will produce a layout like the one shown in the following screenshot:

This layout consists of a Navigation panel, a Master panel, and a Details panel as shown in the following screenshot:

The Master panel has a toolbar with a button that switches the Details panel's location from bottom to right, or hides it altogether:

Besides being able to add components to any of the layout's panels via configuration objects, you can also reconfigure any of the panels by the same means.

Portals are one of the most efficient ways to present information from diverse sources. This is how you can create a dashboard-style GUI that consists of a portal region and a Portlets Catalog. Portlets in the catalog can be added to the portal via a context menu. Once in the catalog, a portlet can be re-positioned or removed from the portal and sent back to the catalog. In the following screenshot, you'll see how a portlet is added using a context menu:

In the following screenshot, you'll see how a portlet is removed:

Portlets can also be re-positioned, as shown in the following screenshot: