PacktLib: Ext JS 3.0 Cookbook

Ext JS 3.0 Cookbook


About the Author

About the Reviewer


DOM and Data Types, the Ext JS Way


Detecting browsers and platforms used by clients

Retrieving DOM nodes and elements

Acquiring references to Ext JS components

Running high-performance DOM queries

Encoding and decoding JSON

Encoding and decoding URL data

Determining the object type and converting empty references to a default value

Finding objects in an array and removing array items

Manipulating strings à la Ext JS

Effortless range checking for numbers

Formatting, parsing, and manipulating dates

Preventing naming conflicts and scoping non-global variables

Extending JavaScript objects, the Ext JS way

Adding features to the Ext JS classes

Building custom JavaScript classes that inherit the functionality of Ext JS

Laying Out a Rich User Interface


Laying out items within a container using CSS-style absolute positioning

Maintaining components' proportions when their containers are resized

Stacking items with an accordion layout

Wizard style UI using a card layout

Using a tabbed look

Taking all the browser window's real estate

Positioning components in multiple columns

Using the table layout

Creating a modern application layout with collapsible regions

A custom column layout

A three-panel application layout with a single line of code

Creating a portal and a portlets catalog

Load, Validate, and Submit Forms


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

Fun with Combo Boxes and Date Fields


Using the combo box with local data

Displaying remote data with a combo box

Combo box with autocomplete

How the combo box helps you type

Converting an HTML drop-down list into an Ext combo box

Cascading combo boxes

Using templates to change the look of combo box items

Using paging to handle a large number of combo box items

The different ways to set up disabled dates in a date field

The date range selector

Using Grid Panels to Display and Edit Tabular Data


Displaying XML data sent by the server

Displaying JSON data generated by the server

Creating a grid that uses server-side sorting

Implementing data paging

Data grouping with live group summaries

Creating data previews

Creating a grid panel with expandable rows

Using checkboxes to select grid rows

Numbering rows in a grid panel

Changing grid panel data using cell editors

Automatic uploading of data edited with a grid

Performing batch uploads of data edited with a grid

Changing a grid's data store and columns at runtime

More Applications of Grid and List Views


Creating a master-details view with a grid and a panel

Creating a master-details view with a grid and a form

Creating a master-details view with a combo box and a grid

Creating a master-details view with two grids

Displaying large recordsets with a buffered grid

Using the lightweight ListView class

Editing rows with the RowEditor plugin

Adding tool tips to grid cells

Using the PropertyGrid class

Using drag-and-drop between two grids

Keeping Tabs on Your Trees


Handling tab activation

Loading tab data with Ajax

Adding tabs dynamically

Enhancing a TabPanel with plugins: The Close menu

Enhancing a TabPanel with plugins: The TabScroller menu

Populating tree nodes with server-side data

Tree and panel in a master-details relationship

The multi-column TreePanel

Drag-and-drop between tree panels

Drag-and-drop from a tree to a panel

Making Progress with Menus and Toolbars


Placing buttons in a toolbar

Working with the new ButtonGroup component

Placing menus in a toolbar

Commonly used menu items

Embedding a progress bar in a status bar

Creating a custom look for the status bar items

Using a progress bar to indicate that your application is busy

Using a progress bar to report progress updates

Changing the look of a progress bar

Well-charted Territory


Setting up a line chart to display local data

Setting up a line chart to display data retrieved from the server

Setting up a column chart to display local data

Setting up a column chart to display data retrieved from the server

Displaying local data with a pie chart

Displaying remote data with a pie chart

Using a chart component to display multiple data series

Creating an auto-refreshing chart

Configuring the Slider component to display a custom tip

Enhancing the Slider component with custom tick marks

Patterns in Ext JS


Sharing functionality with the Action class

Autosaving form values

Saving resources with lazy component instantiation

Extending a class

Using code modules to achieve encapsulation

Implementing a publish/subscribe mechanism with relayEvents()

Augmenting a class with a plugin

Building preconfigured classes

Implementing state preservation with cookies