Free Sample
+ Collection

Learning Ext JS

Colin Ramsay, Shea Frederick, Steve 'Cutter' Blades

Build dynamic, desktop-style user interfaces for your data-driven web applications
RRP $23.99
RRP $39.99
Print + eBook

Want this title & more?

$12.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781847195142
Paperback324 pages

About This Book

  • Learn to build consistent, attractive web interfaces with the framework components.
  • Integrate your existing data and web services with Ext JS data support.
  • Enhance your JavaScript skills by using Ext's DOM and AJAX helpers.
  • Extend Ext JS through custom components.

Who This Book Is For

This book is written for Web Application Developers who are familiar with HTML but may have little to no experience with JavaScript application development. If you are starting to build a new web application, or are re-vamping an existing web application, then this book is for you.

Table of Contents

Chapter 1: Getting Started
About Ext
Getting Ext
Including Ext in your pages
Using the Ext library
The example
Not working?
I'm asynchronous!
Ext JS online community
Chapter 2: The Staples of Ext
Ready, set, go!
What just happened?
Using onReady
More widget wonders
Meet JSON and the config object
Time for action
Lighting the fire
Chapter 3: Forms
The core components of a form
Our first form
Nice form—how does it work?
Form fields
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
Chapter 4: Buttons, Menus, and Toolbars
A toolbar for every occasion
Load content on menu item click
Form fields in a toolbar
Toolbars in windows, grids, and panels
Chapter 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
Chapter 6: Editor Grids
What can I do with an editable grid?
Working with editable grids
Saving edited data to the server
Chapter 7: Layouts
What are layouts, regions, and viewports?
Tab panels
Widgets everywhere
Tricks and advanced layouts
Chapter 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
Chapter 9: Windows and Dialogs
Opening a dialog
Window management
Chapter 10: Effects
Fxcellent functions
The Fx is in
Multiple effects
Bring out the flash
Chapter 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
Chapter 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
Dealing with Recordset changes
Many objects take a Store
Chapter 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
Chapter 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
Where do we go from here?

What You Will Learn

  • Create responsive forms
  • Look at Web Applications from an entirely new perspective
  • Learn to use the major UI components available in Ext JS
  • Understand how external data can be consumed by Ext JS
  • Query and process remote data into your application
  • Use Layouts to bring all of the Ext JS pieces together
  • Use Ext JS effects to manipulate the DOM in exciting ways
  • Provide a consistent look and feel to your application using Components
  • Change the visual style of Ext JS using theming support
  • Find Custom Community Extensions to expand your applications
  • Create your own custom library extensions

1. Getting Started
Setup Ext JS to be used on your page and troubleshoot common installation problems.

2. The Staples of Ext
Explore some of the foundational components and configuration of Ext JS.

3. Forms
Create complex forms, database-driven combo boxes, and populate form fields with data.

4. Buttons, Menus, and Toolbars
Use toolbars to create compact complex navigation for your web application.

5. Grids—Making Data Intuitive
Render database-driven grids that include paging, complex rendering, and user interaction.

6. Editor Grid
Go past the standard grid, and set up an editor grid that edits data in line.

7. In an AJAX World, You Need a Good Layout
Create a layout that provides a very flexible and attractive user interface.

8. Ext JS Does Grow on Trees
Demonstrating how to display and manipulate hierarchical data.

9. Windows and Dialogs
Focusing on displaying information in pop-up containers.

10. Effects
Add spice to your applications with compelling visual effects.

11. Drag and Drop
Learn how to move and rearrange elements within your application.

12. It's All About the Data
An introduction into the various types of data Stores, the kinds of data they can consume, how that data is defined, and how to get it.

13. Code for Reuse: Extending Ext JS
An introduction to creating custom application components by extending existing components of the framework

14. The Power of Ext JS: What Else Can You Do?
A look at many of the utility classes of the library, including formatting and state management, as well as Community Components and resources.

In Detail

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.


Read More