DOM and Data Types, the Ext JS Way | Ext JS 3.0 Cookbook

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Ext JS 3.0 Cookbook

4.7 (6)

Ext JS 3.0 Cookbook

4.7 (6)

Overview of this book

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.

Ext JS 3.0 Cookbook

Ext JS 3.0 Cookbook

Credits

Credits

About the Author

About the Author

About the Reviewer

About the Reviewer

Preface

Preface

Free Chapter

DOM and Data Types, the Ext JS Way

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

Laying Out a Rich User Interface

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

Load, Validate, and Submit Forms

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

Fun with Combo Boxes and Date Fields

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

Using Grid Panels to Display and Edit Tabular Data

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

More Applications of Grid and List Views

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

Keeping Tabs on Your Trees

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

Making Progress with Menus and Toolbars

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

Well-charted Territory

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

Patterns in Ext JS

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

Running high-performance DOM queries

Now you'll see how to run queries against the DOM using Ext JS—a must-have when you need to manipulate or perform actions on multiple, related DOM elements. The examples show how to reference all the div elements in a document, obtain all the elements with a CSS class name msg, and iterate over the options of a select element.

How to do it...

The following code snippets are examples of how to run high-performance queries against the DOM using Ext JS:

When you need to retrieve the elements that match the div selector to find the div elements in the document, use the following code snippet:

Ext.onReady(function() {
// Get all the div elements.
var nodes = Ext.query('div');
Ext.each(nodes, function(item, index, allItems) {
document.write(index + '<br/>');
});
});

When you need to reference the elements with the class name msg, use the following code snippet:

var msgLinks = Ext.query('.msg');
Ext.each(msgLinks, function(item,index) {
// Do something with the element here.
});

When you want to iterate over the options of a select element, use the following code snippet:

var select = Ext.get('countries-select');
Ext.each(select.options, function(item,index) {
// Do something with the item here.
});

How it works...

The previous examples use Ext.query(path, [root]), a shorthand of Ext.DomQuery.select(path, [root]), to retrieve an array of DOM nodes that match a given selector.

There's more...

DomQuery provides high-performance selector/XPath processing by compiling queries into reusable functions. It works on HTML and XML documents, supports most of the CSS3 selector's specification as well as some custom selectors and basic XPath, and allows you to plug new pseudo classes and matchers.

See also...

The Retrieving DOM nodes and elements recipe, covered earlier in this chapter, shows how you can use Ext JS to get a handle on any DOM element.
The Acquiring references to Ext JS components recipe, covered earlier in this chapter, explains how to acquire a reference to any component in your code.

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Ext JS 3.0 Cookbook

Search

Your notes and bookmarks