Ext JS 3.0 Cookbook电子书

Ext JS 3.0 Cookbook

Table of Contents

Ext JS 3.0 Cookbook

Credits

About the Author

About the Reviewer

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code for the book

Errata

Piracy

Questions

1. DOM and Data Types, the Ext JS Way

Introduction

Detecting browsers and platforms used by clients

How to do it...

How it works...

There's more...

Retrieving DOM nodes and elements

How to do it...

How it works...

There's more...

See also...

Acquiring references to Ext JS components

How to do it...

How it works...

There's more...

See also...

Running high-performance DOM queries

How to do it...

How it works...

There's more...

See also...

Encoding and decoding JSON

How to do it...

How it works...

There's more...

See also...

Encoding and decoding URL data

How to do it...

How it works...

There's more...

See also...

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

How to do it...

How it works...

Finding objects in an array and removing array items

How to do it...

How it works...

Manipulating strings à la Ext JS

How to do it...

How it works...

Effortless range checking for numbers

How to do it...

How it works...

Formatting, parsing, and manipulating dates

How to do it...

How it works...

There's more...

Preventing naming conflicts and scoping non-global variables

How to do it...

How it works...

Extending JavaScript objects, the Ext JS way

How to do it...

How it works...

There's more...

Adding features to the Ext JS classes

How to do it...

How it works...

There's more...

See also...

Building custom JavaScript classes that inherit the functionality of Ext JS

How to do it...

How it works...

See also...

2. Laying Out a Rich User Interface

Introduction

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

How to do it...

How it works...

Maintaining components' proportions when their containers are resized

How to do it...

How it works...

There's more...

Stacking items with an accordion layout

How to do it...

How it works...

There's more...

See also...

Wizard style UI using a card layout

How to do it...

How it works...

There's more...

See also...

Using a tabbed look

How to do it...

How it works...

There's more...

See also...

Taking all the browser window's real estate

How to do it...

How it works...

There's more...

Positioning components in multiple columns

How to do it...

How it works...

There's more...

See also...

Using the table layout

How to do it...

How it works...

There's more...

See also...

Creating a modern application layout with collapsible regions

How to do it...

How it works...

There's more...

See also...

A custom column layout

Getting ready...

How to do it...

How it works...

There's more...

See also...

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

How to do it...

How it works...

There's more...

See also...

Creating a portal and a portlets catalog

How to do it...

How it works...

There's more...

See also...

3. Load, Validate, and Submit Forms

Introduction

Specifying the required fields in a form

How to do it...

How it works...

There's more...

See also...

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

How to do it...

How it works...

There's more...

See also...

Changing the location where validation errors are displayed

How to do it...

How it works...

There's more...

See also...

Deferring field validation until form submission

How to do it...

How it works...

There's more...

See also...

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

How to do it...

How it works...

There's more...

See also...

Confirming passwords and validating dates using relational field validation

How to do it...

How it works...

There's more...

See also...

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

How to do it...

How it works...

There's more...

See also...

Loading form data from the server

How to do it...

How it works...

There's more...

See also...

Serving the XML data to a form

How to do it...

How it works...

There's more...

See also...

Using forms for file uploads

How to do it...

How it works...

There's more...

See also...

Building friendlier forms using text hints

How to do it...

There's more...

See also...

4. Fun with Combo Boxes and Date Fields

Introduction

Using the combo box with local data

How to do it...

How it works...

There's more...

See also...

Displaying remote data with a combo box

How to do it...

How it works...

There's more...

See also...

Combo box with autocomplete

Getting ready...

How to do it...

How it works...

There's more...

See also...

How the combo box helps you type

How to do it...

How it works...

See also...

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

How to do it...

How it works...

See also...

Cascading combo boxes

How to do it...

How it works...

There's more...

See also...

Using templates to change the look of combo box items

How to do it...

How it works...

See also...

Using paging to handle a large number of combo box items

How to do it...

How it works...

There's more...

See also...

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

How to do it...

How it works...

There's more...

See also...

The date range selector

How to do it...

How it works...

See also...

5. Using Grid Panels to Display and Edit Tabular Data

Introduction

Displaying XML data sent by the server

Getting ready...

How to do it...

How it works...

See also...

Displaying JSON data generated by the server

How to do it...

How it works...

See also...

Creating a grid that uses server-side sorting

How to do it...

How it works...

There's more...

See also...

Implementing data paging

How to do it...

How it works...

See also...

Data grouping with live group summaries

How to do it...

How it works...

See also...

Creating data previews

How to do it...

How it works...

There's more...

See also...

Creating a grid panel with expandable rows

How to do it...

How it works...

There's more...

See also...

Using checkboxes to select grid rows

How to do it...

How it works...

There's more...

Numbering rows in a grid panel

How to do it...

How it works...

Changing grid panel data using cell editors

How to do it...

How it works...

See also...

Automatic uploading of data edited with a grid

How to do it...

How it works...

There's more...

See also...

Performing batch uploads of data edited with a grid

How to do it...

How it works...

There's more...

See also...

Changing a grid's data store and columns at runtime

How to do it...

How it works...

6. More Applications of Grid and List Views

Introduction

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

Getting ready...

How to do it...

How it works...

There's more...

See also...

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

How to do it...

How it works...

There's more...

See also...

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

How to do it...

How it works...

There's more...

See also...

Creating a master-details view with two grids

How to do it...

How it works...

There's more...

See also...

Displaying large recordsets with a buffered grid

How to do it...

How it works...

See also...

Using the lightweight ListView class

How to do it...

How it works...

There's more...

See also...

Editing rows with the RowEditor plugin

How to do it...

How it works...

See also...

Adding tool tips to grid cells

How to do it...

How it works...

Using the PropertyGrid class

How to do it...

How it works...

Using drag-and-drop between two grids

How to do it...

How it works...

7. Keeping Tabs on Your Trees

Introduction

Handling tab activation

How to do it...

How it works...

See also...

Loading tab data with Ajax

Getting ready...

How to do it...

How it works...

See also...

Adding tabs dynamically

How to do it...

How it works...

See also...

Enhancing a TabPanel with plugins: The Close menu

Getting ready...

How to do it...

How it works...

See also...

Enhancing a TabPanel with plugins: The TabScroller menu

Getting ready...

How to do it...

How it works...

There's more...

See also...

Populating tree nodes with server-side data

How to do it...

How it works...

Tree and panel in a master-details relationship

How to do it...

How it works...

There's more...

See also...

The multi-column TreePanel

Getting ready...

How to do it...

How it works...

There's more...

Drag-and-drop between tree panels

How to do it...

How it works...

See also...

Drag-and-drop from a tree to a panel

How to do it...

How it works...

See also...

8. Making Progress with Menus and Toolbars

Introduction

Placing buttons in a toolbar

How to do it...

How it works...

See also...

Working with the new ButtonGroup component

How to do it...

How it works...

See also...

Placing menus in a toolbar

How to do it...

How it works...

See also...

Commonly used menu items

How to do it...

How it works...

See also...

Embedding a progress bar in a status bar

How to do it...

How it works...

See also...

Creating a custom look for the status bar items

How to do it...

How it works...

See also...

Using a progress bar to indicate that your application is busy

How to do it...

How it works...

There's more...

See also...

Using a progress bar to report progress updates

How to do it...

How it works...

See also...

Changing the look of a progress bar

How to do it...

How it works...

See also...

9. Well-charted Territory

Introduction

Setting up a line chart to display local data

How to do it...

How it works...

See also...

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

How to do it...

How it works...

See also...

Setting up a column chart to display local data

How to do it...

How it works...

See also...

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

How to do it...

How it works...

See also...

Displaying local data with a pie chart

How to do it...

How it works...

There's more...

See also...

Displaying remote data with a pie chart

How to do it...

How it works...

There's more...

See also...

Using a chart component to display multiple data series

How to do it...

How it works...

See also...

Creating an auto-refreshing chart

How to do it...

How it works...

Configuring the Slider component to display a custom tip

How to do it...

How it works...

See also...

Enhancing the Slider component with custom tick marks

How to do it...

How it works...

See also...

10. Patterns in Ext JS

Introduction

Sharing functionality with the Action class

How to do it...

How it works...

There's more...

Autosaving form values

How to do it...

How it works...

There's more...

Saving resources with lazy component instantiation

How to do it...

How it works...

Extending a class

How to do it...

How it works...

There's more...

See also...

Using code modules to achieve encapsulation

How to do it...

How it works...

There's more...

See also...

Implementing a publish/subscribe mechanism with relayEvents()

How to do it...

How it works...

There's more...

Augmenting a class with a plugin

How to do it...

How it works...

See also...

Building preconfigured classes

How to do it...

How it works...

See also...

Implementing state preservation with cookies

How to do it...

How it works...

There's more...

Index