Book Image

Learning Ext JS 3.2

By : Shea Frederick, Colin Ramsay, Steve 'Cutter' Blades, Nigel White
Book Image

Learning Ext JS 3.2

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

Overview of this book

<p>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.</p> <p>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.</p> <p>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.</p>

Related Content you might be interested in

Current Title:

Small book image
Learning Ext JS 3.2
Shea Frederick | Colin Ramsay | Steve 'Cutter' Blades | Nigel White
Oct, 2010 | 432 pages
No titles found
Table of Contents (22 chapters)
Learning Ext JS 3.2
Learning Ext JS 3.2
Credits
Credits
About the Authors
About the Authors
About the Reviewers
About the Reviewers
Preface
Preface
Free Chapter
1
Getting Started
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
2
The Staples of Ext JS
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
3
Forms
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
4
Menus, Toolbars, and Buttons
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
5
Displaying Data with Grids
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
6
Editor Grids
Editor Grids
What can I do with an editable grid?
Working with editable grids
Saving edited data to the server
RowEditor plugin
Summary
7
Layouts
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
8
Ext JS Does Grow on Trees
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
Windows and Dialogs
Opening a dialog
Dialogs
Windows
Window management
Summary
10
Charting New Territory
Charting New Territory
Just another component
Styling the pie slices
Bar and column charts
Tooltips
A real world example
Summary
11
Effects
Effects
It's elementary
Fxcellent functions
The Fx is in
Multiple effects
Elemental
Reveal all
Summary
12
Drag-and-drop
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
13
Code for Reuse: Extending Ext JS
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
14
Plugging In
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
15
It's All About the Data
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
16
Marshalling Data Services with Ext.Direct
Marshalling Data Services with Ext.Direct
What is Direct?
Building server-side stacks
Putting the pieces together
Summary
17
The Power of Ext JS: What Else Can You Do?
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

Using the Ext.onReady function

Ext JS can only render widgets when the HTML document has been fully initialized by the browser. All Ext JS pages must only begin accessing the document within an Ext.onReady call.

We could have written the code like this:

var mainFunction = function(){
Ext.Msg.alert('Hi', 'Hello World Example');
};
Ext.onReady(mainFunction);

In this version, we can see more easily that it is a function reference which is passed to Ext.onReady. It's slightly more longwinded this way, but while still a beginner, this may be a useful style for us to use.

Previous Section
End of Section 9
Next Section