Packed with easy-to-follow examples to exercise all of the features of the Ext JS library

Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible

Who This Book Is For

The Ext JS Cookbook is for Ext JS users who want a book of useful techniques, with explanations, that they can refer to and adapt to their purposes. Developers who are already familiar with Ext JS will find practical guidance and numerous examples covering most of the library's features and components that can be used as a solid foundation to build upon when creating rich internet applications.

Table of Contents

Chapter 1: DOM and Data Types, the Ext JS Way

Introduction

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

Chapter 2: Laying Out a Rich User Interface

Introduction

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

Chapter 3: Load, Validate, and Submit Forms

Introduction

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

Chapter 4: Fun with Combo Boxes and Date Fields

Introduction

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

Chapter 5: Using Grid Panels to Display and Edit Tabular Data

Introduction

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

Chapter 6: More Applications of Grid and List Views

Introduction

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

Chapter 7: Keeping Tabs on Your Trees

Introduction

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

Chapter 8: Making Progress with Menus and Toolbars

Introduction

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

Chapter 9: Well-charted Territory

Introduction

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

Chapter 10: Patterns in Ext JS

Introduction

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

What You Will Learn

Work with different browsers, platforms, and the DOM, as well as determine and understand the different ExtJS data types

Create your own custom Ext JS data types as you extend their functionality

Build great-looking and friendly forms by using client and server-side field validation, form loading, submission, field customization, and layout techniques

Explore the different layouts provided by the Ext JS library as well as create your own, and understand their common uses

Display, edit, and group tabular data generated by the server using Grid Panels

Explore the advantages and the efficiency tradeoffs of widgets such as Combo boxes

Use the drag and drop features of the grid component, data editing with the new RowEditor Class, and the new lightweight ListView component

Explore multiple ways of displaying master-details relationships

Group components or information under the same container to build hierarchical views of information by using TabPanel components

Use patterns to build a solid and flexible application architecture and implement additional design patterns such as auto-saving form elements, component state management, and code modules to build robust and flexible applications with Ext JS

Build your own custom components on top of the Ext framework and enhance the custom components created by the Ext JS users' community

In Detail

Using Ext JS you can easily build desktop-style interfaces in your web applications. Over 400,000 developers are working smarter with Ext JS and yet most of them fail to exercise all of the features that this powerful JavaScript library has to offer.

Get to grips with all of the features that you would expect with this quick and easy-to-follow Ext JS Cookbook. This book provides clear instructions for getting the most out of Ext JS with and offers many exercises to build impressive rich internet applications. This cookbook shows techniques and "patterns" for building particular interface styles and features in Ext JS. Pick what you want and move ahead.

It teaches you how to use all of the Ext JS widgets and components smartly, through practical examples and exercises. Native and custom layouts, forms, grids, listviews, treeviews, charts, tab panels, menus, toolbars, and many more components are covered in a multitude of examples.The book also looks at best practices on data storage, application architecture, code organization, presenting recipes for improving them—our cookbook provides expert information for people working with Ext JS.

Authors

Jorge Ramon

Jorge Ramon is the Vice President of Development for Taladro Systems LLC, where he has led the design and development of a number of software products for the law industry—including QwikTime™ and LawDrill™.

Jorge has over 16 years of experience as a software developer and has also worked creating web applications, search engines, and automatic-control software. He actively contributes to the software development community through his blog: MiamiCoder.com.

Table of Contents

Chapter 1: DOM and Data Types, the Ext JS Way

Introduction

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

Chapter 2: Laying Out a Rich User Interface

Introduction

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

Chapter 3: Load, Validate, and Submit Forms

Introduction

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

Alerts & Offers

Series & Level

We understand your time is important. Uniquely amongst the major publishers, we seek to develop and publish the broadest range of learning and information products on each technology. Every Packt product delivers a specific learning pathway, broadly defined by the Series type. This structured approach enables you to select the pathway which best suits your knowledge level, learning style and task objectives.

Learning

As a new user, these step-by-step tutorial guides will give you all the practical skills necessary to become competent and efficient.

Beginner's Guide

Friendly, informal tutorials that provide a practical introduction using examples, activities, and challenges.

Essentials

Fast paced, concentrated introductions showing the quickest way to put the tool to work in the real world.

Cookbook

A collection of practical self-contained recipes that all users of the technology will find useful for building more powerful and reliable systems.

Blueprints

Guides you through the most common types of project you'll encounter, giving you end-to-end guidance on how to build your specific solution quickly and reliably.

Mastering

Take your skills to the next level with advanced tutorials that will give you confidence to master the tool's most powerful features.

Starting

Accessible to readers adopting the topic, these titles get you into the tool or technology so that you can become an effective user.

Progressing

Building on core skills you already have, these titles share solutions and expertise so you become a highly productive power user.