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

Enhancing the Slider component with custom tick marks

Another enhancement you can make to the Slider component is adding custom tick marks. This recipe teaches you how this can be accomplished using a background image and cascading stylesheets, as seen in the following screenshot:

How to do it...

1. Create an image with tick marks, as seen below:

2. Create a CSS class that will be used to position the tick mark image behind the Slider:

<style type="text/css">
.vertical-slider
{
background: url(img/ticks-vert.gif) no-repeat 20px 20px;
}
</style>

3. Define the Slider:

Ext.onReady(function() {
var slider = new Ext.Slider({
renderTo:Ext.getBody(),
vertical: true,
minValue: 0,
maxValue: 100,
height: 214,
increment: 10,
plugins: new Ext.ux.SliderTip({
getText: function(slider) {
return String.format('<b>{0}% of available space </b>', slider.getValue());
}
})
});
});

4. Add the vertical-slider CSS class to the document's body:
```
<body class="vertical-slider" style="padding...
```

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

Enhancing the Slider component with custom tick marks

How to do it...