Learning Ext JS 3.2

Build dynamic, desktop-style user interfaces for your data-driven web applications using Ext JS

Learning Ext JS 3.2

Learning
Shea Frederick et al.

Build dynamic, desktop-style user interfaces for your data-driven web applications using Ext JS
$26.99
$44.99
RRP $26.99
RRP $44.99
eBook
Print + eBook
$12.99 p/month

Want this title & more? 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.
+ Collection
Free Sample

Book Details

ISBN 139781849511209
Paperback432 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
  • An interactive tutorial packed with loads of example code and illustrative screenshots

 

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
A word about JavaScript
I'm asynchronous!
About Ext JS
Getting Ext JS
Including Ext JS in our pages
Using the Ext JS library
The example
Using the Ext.onReady function
Not working?
Adapters
Localization
Ext JS online help
Summary
Chapter 2: The Staples of Ext JS
Meet the config object
What just happened?
More widget wonders
Time for (further) action
Lighting the fire
Can we use our own HTML?
Summary
Chapter 3: Forms
The core components of a form
Our first form
Nice form—how does it work?
Validation
Built-in validation—vtypes
Styles for displaying errors
Custom validation—creating our own vtype
Masking—don't press that key!
Radio buttons and check boxes
TextArea and HTMLEditor
Listening for form field events
Buttons and form action
Loading a form with data
DOM listeners
Summary
Chapter 4: Menus, Toolbars, and Buttons
What's on the menu?
A toolbar for every occasion
Loading content on menu item click
Buttons don't have to be in a toolbar
Toolbars unleashed
Summary
Chapter 5: Displaying Data with Grids
What is a grid anyway?
A GridPanel is databound
The record definition
The Reader
Displaying structured data with a GridPanel
Displaying the GridPanel
Defining a grid's column model
Using cell renderers
Built-in features
Displaying server-side data in the grid
Programming the grid
Advanced grid formatting
Summary
Chapter 6: Editor Grids
What can I do with an editable grid?
Working with editable grids
Saving edited data to the server
RowEditor plugin
Summary
Chapter 7: Layouts
What is a layout manager?
So what layouts are available?
A dynamic application layout
Our first Viewport
Nesting: child components may be Containers
Accordion layout
A toolbar as part of the layout
Using a FormPanel in the layout
AnchorLayout
More layouts
Vbox layout
Hbox layout
Dynamically changing components
Adding new components
Summary
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
Summary
Chapter 9: Windows and Dialogs
Opening a dialog
Dialogs
Windows
Window management
Summary
Chapter 10: Charting New Territory
Just another component
Styling the pie slices
Bar and column charts
Tooltips
A real world example
Summary
Chapter 11: Effects
It's elementary
Fxcellent functions
The Fx is in
Multiple effects
Elemental
Reveal all
Summary
Chapter 12: 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
Chapter 13: Code for Reuse: Extending Ext JS
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
Chapter 14: Plugging In
What can we do?
How it works
First signs of life
The search form
Interacting with the host
Configurable plugins
Extra credit
Summary
Chapter 15: It's All About the Data
Understanding data formats
The data Store object
Using a DataReader to map data
Using a custom DataReader
Writing a custom DataReader
Getting what you want: finding data
Getting what you want: filtering data
Dealing with Recordset changes
Taking changes further: the DataWriter
Many objects use a Store
Summary
Chapter 16: Marshalling Data Services with Ext.Direct
What is Direct?
Building server-side stacks
Putting the pieces together
Summary
Chapter 17: 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?
Summary

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
  • Build great-looking and friendly forms by using client and server-side field validation, form loading, submission, field customization, and layout techniques
  • 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
  • Create bar charts, linear charts, and pie charts using the chart widget to display information in a very simple way
  • Find Custom Community Extensions to expand your applications
  • Create your own custom library extensions

 

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. Yet, most web developers fail to use this amazing library to its full power.

This book covers all of the major features of the Ext framework using interactive code and clear explanation coupled with loads of screenshots. 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 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. You will also learn how to use all of the Ext JS widgets and components smartly, through interactive examples.By using a series of straightforward examples backed by screenshots, Learning Ext JS 3.2 will help you create web applications that look good and perform beyond the expectations of your users.

Authors

Table of Contents

Chapter 1: Getting Started
A word about JavaScript
I'm asynchronous!
About Ext JS
Getting Ext JS
Including Ext JS in our pages
Using the Ext JS library
The example
Using the Ext.onReady function
Not working?
Adapters
Localization
Ext JS online help
Summary
Chapter 2: The Staples of Ext JS
Meet the config object
What just happened?
More widget wonders
Time for (further) action
Lighting the fire
Can we use our own HTML?
Summary
Chapter 3: Forms
The core components of a form
Our first form
Nice form—how does it work?
Validation
Built-in validation—vtypes
Styles for displaying errors
Custom validation—creating our own vtype
Masking—don't press that key!
Radio buttons and check boxes
TextArea and HTMLEditor
Listening for form field events
Buttons and form action
Loading a form with data
DOM listeners
Summary
Chapter 4: Menus, Toolbars, and Buttons
What's on the menu?
A toolbar for every occasion
Loading content on menu item click
Buttons don't have to be in a toolbar
Toolbars unleashed
Summary
Chapter 5: Displaying Data with Grids
What is a grid anyway?
A GridPanel is databound
The record definition
The Reader
Displaying structured data with a GridPanel
Displaying the GridPanel
Defining a grid's column model
Using cell renderers
Built-in features
Displaying server-side data in the grid
Programming the grid
Advanced grid formatting
Summary
Chapter 6: Editor Grids
What can I do with an editable grid?
Working with editable grids
Saving edited data to the server
RowEditor plugin
Summary
Chapter 7: Layouts
What is a layout manager?
So what layouts are available?
A dynamic application layout
Our first Viewport
Nesting: child components may be Containers
Accordion layout
A toolbar as part of the layout
Using a FormPanel in the layout
AnchorLayout
More layouts
Vbox layout
Hbox layout
Dynamically changing components
Adding new components
Summary
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
Summary
Chapter 9: Windows and Dialogs
Opening a dialog
Dialogs
Windows
Window management
Summary
Chapter 10: Charting New Territory
Just another component
Styling the pie slices
Bar and column charts
Tooltips
A real world example
Summary
Chapter 11: Effects
It's elementary
Fxcellent functions
The Fx is in
Multiple effects
Elemental
Reveal all
Summary
Chapter 12: 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
Chapter 13: Code for Reuse: Extending Ext JS
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
Chapter 14: Plugging In
What can we do?
How it works
First signs of life
The search form
Interacting with the host
Configurable plugins
Extra credit
Summary
Chapter 15: It's All About the Data
Understanding data formats
The data Store object
Using a DataReader to map data
Using a custom DataReader
Writing a custom DataReader
Getting what you want: finding data
Getting what you want: filtering data
Dealing with Recordset changes
Taking changes further: the DataWriter
Many objects use a Store
Summary
Chapter 16: Marshalling Data Services with Ext.Direct
What is Direct?
Building server-side stacks
Putting the pieces together
Summary
Chapter 17: 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?
Summary

Book Details

ISBN 139781849511209
Paperback432 pages
Read More