Learning Ext JS

By : Colin Ramsay, Shea Frederick, Steve 'Cutter' Blades

Learning Ext JS

By: Colin Ramsay, Shea Frederick, Steve 'Cutter' Blades

Overview of this book

As more and more of our work is done through a web browser, and more businesses build web rather than desktop applications, users want web applications that look and feel like desktop applications. Ext JS is a JavaScript library that makes it (relatively) easy to create desktop-style user interfaces in a web application, including multiple windows, toolbars, drop-down menus, dialog boxes, and much more. Both Commercial and Open Source licenses are available for Ext JS. Ext JS has the unique advantage of being the only client-side UI library that also works as an application development library. Learning Ext JS will help you create rich, dynamic, and AJAX-enabled web applications that look good and perform beyond the expectations of your users. From the building blocks of the application layout, to complex dynamic Grids and Forms, this book will guide you through the basics of using Ext JS, giving you the knowledge required to create rich user experiences beyond typical web interfaces. It will also provide you with the tools you need to use AJAX, by consuming server-side data directly into the many interfaces of the Ext JS component library.

Preface

What this book covers

What you need for this book

Free Chapter

1. Getting Started

About Ext

Getting Ext

Including Ext in your pages

Using the Ext library

Ext JS online community

Summary

2. The Staples of Ext

Meet JSON and the config object

Time for action

Lighting the fire

Summary

3. Forms

The core components of a form

Our first form

Nice form—how does it work?

Form fields

Validation

Built-in validation—vtypes

Styles for displaying errors

Custom validation—create your own vtype

Masking—don't press that key!

Radio buttons and check boxes

The ComboBox

TextArea and HTMLEditor

Listening for form field events

Buttons and form action

Loading a form with data

Object reference or component config

Summary

4. Buttons, Menus, and Toolbars

A toolbar for every occasion

Toolbars

Load content on menu item click

Form fields in a toolbar

Toolbars in windows, grids, and panels

Summary

5. Displaying Data with Grids

What is a grid anyway?

Displaying structured data with a GridPanel

Displaying the GridPanel

Defining a Grids column model

Using cell renderers

Built-in features

Displaying server-side data in the grid

Programming the grid

Advanced grid formatting

Summary

6. Editor Grids

What can I do with an editable grid?

Working with editable grids

Saving edited data to the server

Summary

7. Layouts

What are layouts, regions, and viewports?

Tab panels

Widgets everywhere

Accordions

Tricks and advanced layouts

Summary

8. Ext JS Does Grow on Trees

Planting for the future

From tiny seeds...

Our first sapling

A tree can't grow without data

Tending your trees

Trimming and pruning

The roots

Summary

9. Windows and Dialogs

Opening a dialog

Dialogs

Windows

Window management

Summary

10. Effects

Summary

11. Drag-and-Drop

Drop what you're doing

Life's a drag

Interacting the fool

Registering an interest

Extreme drag-and-drop

Drag-drop groups

It's all in the details

Managing our movement

Scroll management

Dragging within components

Summary

12. It's All about the Data

Understanding data formats

The data store object

Using a DataReader to map data

Getting what you want: Finding data

Getting what you want: Filtering data

Dealing with Recordset changes

Many objects take a Store

Summary

13. Code for Reuse: Extending Ext JS

Object-oriented JavaScript

Object-oriented programming with Ext JS

Understanding packages, classes, and namespaces

Ok, what do we extend?

Creating a custom namespace

Our first custom class

Overriding methods

Understanding the order of events

Creating our own custom events

Our first custom component: Complete

What's next? Breaking it down

Using xtype: The benefits of lazy instantiation

Using our custom components within other objects

Summary

14. The Power of Ext JS: What Else Can You Do?

So much to work with

Form widgets

Data formatting

Managing application state

Accessing the DOM

Ext JS for the desktop: Adobe AIR

Ext JS community extensions

Additional resources

Summary

Where do we go from here?

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Displaying the GridPanel

The thing that pulls everything together is the GridPanel, which takes care of placing the data into columns and rows, along with adding column headers, and boxing everything together in a neat little package.

The movie data isn't much good to anybody just sitting in the computer's memory. Let's display it in a grid:

Add your data store to the following GridPanel code:

Ext.onReady(function(){
// add your data store here
var grid = new Ext.grid.GridPanel({
renderTo: document.body,
frame:true,
title: 'Movie Database',
height:200,
width:500,
store: store,
columns: [
{header: "Title", dataIndex: 'title'},
{header: "Director", dataIndex: 'director'},
{header: "Released", dataIndex: 'released',
renderer: Ext.util.Format.dateRenderer('m/d/Y')},
{header: "Genre", dataIndex: 'genre'},
{header: "Tagline", dataIndex: 'tagline'}
]
});
});

Load...

Learning Ext JS

By : Colin Ramsay, Shea Frederick, Steve 'Cutter' Blades

Learning Ext JS

By: Colin Ramsay, Shea Frederick, Steve 'Cutter' Blades

Overview of this book

Related Content you might be interested in

Current Title:

Learning Ext JS

Displaying the GridPanel