Ext JS 3.0 Cookbook

Ext JS 3.0 Cookbook

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

Credits

About the Author

About the Reviewer

Preface

Free Chapter

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

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

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

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

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

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

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

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

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

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

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Encoding and decoding JSON

Converting JavaScript and Ext JS objects to JSON, and converting JSON data back to JavaScript objects is easily achievable with Ext JS. For example, here's how to JSON-encode an array and how to rebuild the array from its JSON representation:

Note

JavaScript Object Notation (JSON) is a lightweight text format where an object is represented with an unordered set of name/value pairs and an array with an ordered collection of values.

JSON is completely language independent, easy for humans to read and write, and easy for machines to parse and generate. These properties make JSON an ideal data-interchange format.

Find out more about JSON at www.json.org.

How to do it...

Let's encode an array of colors using the following steps:

1. Create an array called colorsArray:
```
var colorsArray = new Array();
```

2. Put some values in the array:

colorsArray[0] = 'Blue';
colorsArray[1] = 'Red';
colorsArray[2] = 'White';

3. Now, convert to JSON:
```
var colorsJson = Ext.encode(colorsArray);
```
The value of the colorsJson variable should be the string ["Blue","Red","White"] string
4. Let's re-create the array based on its JSON string. Take the JSON representation of colorsArray:
```
var colorsJson = '["Blue","Red","White"]';
```

5. Parse the JSON and rebuild the array:

var colorsArray = Ext.decode(colorsJson);

After this, colorsArray contains the colors data: colorsArray[0] is 'Blue', colorsArray[1] is 'Red', and colorsArray[2] is 'White'.

How it works...

To obtain a JSON representation of an array, object, or other value, pass the value to Ext.util.JSON.encode(object). You can also use the shorthand, Ext.encode(object).

You can parse a JSON string by using Ext.util.JSON.decode(json), or its shorthand Ext.decode(json).

While decoding JSON involves simply calling the JavaScript eval(String) function, the encoding process is more complicated and requires different implementations depending on the data type being encoded. Internally, the encode(object) function calls specialized encoding functions for arrays, dates, Boolean values, strings, and other types.

You can also set the Ext.USE_NATIVE_JSON property to true, which will cause calls to encode(object) and decode(json) to use the browser's native JSON handling features. This option is turned off by default. If you turn it on, beware that native JSON methods will not work on objects that have functions, and that property names should be quoted in order for the data to be correctly decoded.

There's more...

JSON encoding and decoding is a pillar of modern web development, given the role of JSON—a language-independent, data-interchange format—in facilitating communications between the client-side and server-side of web applications. For instance, you can expect to find JSON manipulation when your application needs to send data to the server, as well as when the application needs to dynamically create objects from server-supplied data.

Ext JS 3.0 Cookbook

Ext JS 3.0 Cookbook

Overview of this book

Related Content you might be interested in

Current Title:

Ext JS 3.0 Cookbook

Encoding and decoding JSON

Note

How to do it...

How it works...

There's more...

See also...