Book Image

Learning Ext JS

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

Learning Ext JS

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

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. Both Commercial and Open Source licenses are available for Ext JS.<br /><br />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.<br /><br />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.</p>

Related Content you might be interested in

Current Title:

Small book image
Learning Ext JS
Colin Ramsay | Shea Frederick | Steve 'Cutter' Blades
Nov, 2008 | 324 pages
No titles found
Table of Contents (16 chapters)
Preface
Preface
What this book covers
What you need for this book
Who is this book for
Conventions
Reader feedback
Customer support
Free Chapter
1
1. Getting Started
1. Getting Started
About Ext
Getting Ext
Including Ext in your pages
Using the Ext library
The example
Not working?
Adapters
I'm asynchronous!
Localization
Ext JS online community
Summary
2
2. The Staples of Ext
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
Summary
3
3. Forms
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
4. Buttons, Menus, and Toolbars
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
5. Displaying Data with Grids
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
6. Editor Grids
6. Editor Grids
What can I do with an editable grid?
Working with editable grids
Saving edited data to the server
Summary
7
7. Layouts
7. Layouts
What are layouts, regions, and viewports?
Tab panels
Widgets everywhere
Accordions
Tricks and advanced layouts
Summary
8
8. Ext JS Does Grow on Trees
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
9. Windows and Dialogs
9. Windows and Dialogs
Opening a dialog
Dialogs
Windows
Window management
Summary
10
10. Effects
10. Effects
It's elementary
Fancy features
It's ok to love
Fxcellent functions
The Fx is in
Multiple effects
Elemental
Bring out the flash
Summary
11
11. Drag-and-Drop
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
12. It's All about the Data
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
13. Code for Reuse: Extending Ext JS
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
14. The Power of Ext JS: What Else Can You Do?
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?
15
Index
Index

Object reference or component config

Throughout these first few chapters, we have started to use more and more configuration objects to set up our Ext JS components, instead of instantiating them. Let's do a quick comparison of the two methods.

Instantiated

var test = new Ext.form.TextField({
fieldLabel: 'Title',
name: 'title',
allowBlank: false
});

Here, the component has been created and memory used right away, even if it is not displayed on the screen yet. Depending on how your end users work with your application, they might never even need or use this particular text field. However, when it is the time to display this field to the end users, it shows up really fast.

Component config

{
xtype: 'textfield',
fieldLabel: 'Title',
name: 'title',
allowBlank: false
}

With the component config, we have a 'description' of what has to happen when it is time to use the field. No memory is used right away. It's only when the user...

Previous Section
End of Section 17
Next Section