Table of Contents

Copyright

Brief Table of Contents

Table of Contents

Preface

Acknowledgments

About the Cover Illustration

1. Introduction to Ext JS

Chapter 1. A framework apart

1.1. Looking at Ext JS

1.1.1. Integration with existing sites

1.1.2. Rich API documentation

1.1.3. Rapid development with prebuilt widgets

1.1.4. Works with Prototype, jQuery, and YUI, and inside AIR

1.2. What you need to know

1.3. A bird’s-eye view of the framework

Core

UI Components

Web Remoting

Data Services

Drag and Drop

Utilities

1.3.1. Containers and layouts at a glance

1.3.2. Other Containers in action

1.3.3. Grids, DataView, and ListView

1.3.4. Make like a TreePanel and leaf

1.3.5. Form input fields

1.3.6. Other widgets

1.4. New Ext JS 3.0 goodies

1.4.1. Ext JS does remoting with Direct

1.4.2. Data class

1.4.3. Meet the new layouts

1.4.4. Grid ColumnModel enhancements

1.4.5. ListView, like GridPanel on a diet

1.4.6. Charts come to Ext JS

1.5. Downloading and configuring

1.5.1. Looking at the SDK contents

1.5.2. Setting up Ext JS for the first time

1.5.3. Configuring Ext JS for use with others

1.5.4. Configuring BLANK_IMAGE_URL

1.6. Take it for a test drive

1.7. Summary

Chapter 2. Back to the basics

2.1. Starting off the right way

2.1.1. Fire only when ready!

2.1.2. Let Ext JS pull the trigger

2.2. The Ext.Element class

2.2.1. The heart of the framework

2.2.2. Using Ext.Element for the first time

2.2.3. Creating child nodes

2.2.4. Removing child nodes

2.2.5. Using Ajax with Ext.Element

2.3. Using Templates and XTemplates

2.3.1. Exercising templates

2.3.2. Looping with XTemplates

2.3.3. Advanced XTemplate usage

2.4. Summary

Chapter 3. Events, Components, and Containers

3.1. Managing events with Observable

3.1.1. Taking a step back

3.1.2. DOM-based events

3.1.3. Event flow in the DOM

3.1.4. Burst the bubble

3.1.5. Software-driven events

3.1.6. Registration of events and event listeners

3.2. The Component model

3.2.1. XTypes and Component Manager

3.2.2. Component rendering

3.3. The Component lifecycle

3.3.1. Initialization

3.3.2. Render

3.3.3. Destruction

3.4. Containers

3.4.1. Learning to tame children

3.4.2. Querying the Container hierarchy

3.4.3. The Viewport Container

3.5. Summary

2. Ext JS Components

Chapter 4. A place for Components

4.1. The Panel

4.1.1. Building a complex Panel

4.2. Popping up Windows

4.2.1. Further Window configuration exploration

4.2.2. Replacing alert and prompt with MessageBox

4.2.3. Advanced MessageBox techniques

4.2.4. Showing an animated wait MessageBox

4.3. Components can live in tab panels too

4.3.1. Remember these two options

4.3.2. Building our first TabPanel

4.3.3. Tab management methods you should know

4.3.4. Caveats and drawbacks

4.4. Summary

Chapter 5. Organizing Components

5.1. The simple ContainerLayout

5.2. The AnchorLayout

5.3. The FormLayout

5.4. The AbsoluteLayout

5.5. Making components fit

5.6. The AccordionLayout

5.7. The CardLayout

5.8. The ColumnLayout

5.9. The HBox and VBox layouts

5.10. The TableLayout

5.11. The BorderLayout

5.12. Summary

Chapter 6. Ext JS takes form

6.1. The TextField

6.1.1. Password and file select fields

6.1.2. Building a TextArea

6.1.3. The convenient NumberField

6.2. TypeAhead with the ComboBox

6.2.1. Building a local ComboBox

6.2.2. Implementing a remote ComboBox

6.2.3. The ComboBox deconstructed

6.2.4. Customizing our ComboBox

6.2.5. Finding the time

6.3. WYSIWhat?

6.3.1. Constructing our first HtmlEditor

6.3.2. Dealing with lack of validation

6.4. Selecting a date

6.5. Checkboxes and Radios

6.6. The FormPanel

6.7. Data submission and loading

6.7.1. Submitting the good old way

6.7.2. Submitting via Ajax

6.7.3. Loading data into our form

6.8. Summary

3. Data-driven Components

Chapter 7. The venerable GridPanel

7.1. Introducing GridPanel

7.1.1. Looking under the hood

7.2. The data Store at a glance

7.2.1. How data Stores work

7.3. Building a simple GridPanel

7.3.1. Setting up an ArrayStore

7.3.2. Completing our first GridPanel

7.4. Advanced GridPanel construction

7.4.1. What we’re building

7.4.2. Creating the store using shortcuts

7.4.3. Building a ColumnModel with custom renderers

7.4.4. Configuring our advanced GridPanel

7.4.5. Configuring a Container for our GridPanel

7.4.6. Applying event handlers for interaction

7.5. Summary

Chapter 8. The EditorGridPanel

8.1. A close look at the EditorGridPanel

8.2. Building your first EditorGridPanel

8.3. Navigating our EditorGridPanel

8.4. Getting the CRUD in

8.4.1. Adding save and reject logic

8.4.2. Saving or rejecting your changes

8.4.3. Adding create and delete

8.4.4. Using create and delete

8.5. Using Ext.data.DataWriter

8.5.1. Enter Ext.data.DataWriter

8.5.2. Adding DataWriter to our JsonStore

8.5.3. Using DataWriter

8.5.4. An automated writing store

8.6. Summary

Chapter 9. DataView and ListView

9.1. What is the DataView?

9.2. Constructing a DataView

9.2.1. Building the Store and XTemplate

9.2.2. Building the DataView and Viewport

9.3. Enter the ListView

9.3.1. Binding the DataView to the ListView

9.4. Bringing it all together

9.4.1. Configuring the FormPanel

9.4.2. Applying the final bindings

9.5. Summary

Chapter 10. Charts

10.1. Defining the four charts

10.2. Charts deconstructed

10.3. Building a LineChart

10.3.1. Customizing the ToolTip

10.3.2. Adding titles to the x- and y-axes

10.3.3. Styling the Chart body

10.4. Adding multiple Series

10.4.1. Adding legends

10.5. Constructing ColumnCharts

10.5.1. Stacking columns

10.5.2. Mixing a line with columns

10.6. Constructing BarCharts

10.6.1. Configuring a BarChart

10.7. A slice of PieChart

10.7.1. Custom tipRenderer

10.8. Summary

Chapter 11. Taking root with trees

11.1. What is a tree (TreePanel)?

11.1.1. Looking under the roots

11.2. Planting our first TreePanel

11.3. Dynamic TreePanels grow

11.3.1. Fertilizing the TreePanel

11.4. CRUD on a TreePanel

11.4.1. Adding context menus to a TreePanel

11.4.2. Wiring up the Edit logic

11.4.3. Tackling delete

11.4.4. Creating nodes for our TreePanel

11.5. Summary

Chapter 12. Menus, Buttons, and Toolbars

12.1. Menus at a glance

12.1.1. Building a menu

12.1.2. Obtaining and using Icons

12.1.3. Taming the icon madness

12.1.4. Adding a submenu

12.1.5. Adding a Separator and TextItem

12.1.6. Picking a color and choosing a date

12.1.7. Put that menu Item in check

12.1.8. Select only one item at a time

12.2. Users know how to push your Buttons

12.2.1. Building Buttons

12.2.2. Attaching a Menu to a Button

12.2.3. Do a split (SplitButton)

12.2.4. Customizing the layout of your Button

12.3. Grouping your Buttons

12.4. Toolbars

12.5. Read, set, Ext.Action!

12.6. Summary

4. Advanced Ext

Chapter 13. Drag-and-drop basics

13.1. Taking a good look at drag and drop

13.1.1. The drag-and-drop lifecycle

13.1.2. A top-down view of the drag-and-drop classes

13.1.3. It’s all in the overrides!

13.1.4. Drag and drop always work in groups

13.2. Starting out simple

13.2.1. Creating a small workspace

13.2.2. Configuring items to be draggable

13.2.3. Analyzing the Ext.dd.DD DOM changes

13.2.4. Adding the pool and hot tub drop targets

13.3. Finishing our drag-and-drop implementation

13.3.1. Adding the drop invitation

13.3.2. Adding valid drop

13.3.3. Implementing invalid drop

13.4. Using the DDProxy

13.4.1. Implementing DDProxy and drop invitation

13.5. Summary

Chapter 14. Drag and drop with widgets

14.1. A quick review of the drag-and-drop classes

14.2. Drag and drop with DataViews

14.2.1. Constructing the DataViews

14.2.2. Adding drag gestures

14.2.3. Applying drop

14.3. Drag and drop with GridPanels

14.3.1. Constructing the GridPanels

14.3.2. Enabling drag

14.3.3. Better drop invitation

14.3.4. Adding drop

14.4. Drag and drop with TreePanels

14.4.1. Constructing the TreePanels

14.4.2. Enabling drag and drop

14.4.3. Employing flexible constraints

14.5. Summary

Chapter 15. Extensions and plug-ins

15.1. Inheritance with Ext JS

15.1.1. Inheritance with JavaScript

15.1.2. Extending with Ext JS

15.2. Extending Ext JS Components

15.2.1. Thinking about what we’re building

15.2.2. Extending GridPanel

15.2.3. Our extension in action

15.2.4. Identifying the limitations of extensions

15.3. Plug-ins to the rescue

15.3.1. A robust plug-in design pattern

15.3.2. Developing a plug-in

15.3.3. Our plug-in in action

15.4. Summary

5. Building applications

Chapter 16. Developing for reusability

16.1. Developing for the future

16.1.1. Namespaces

16.1.2. Namespace segmentation

16.1.3. Namespace segmentation for large applications

16.2. Analyzing the application requirements

16.2.1. Abstracting reusability

16.2.2. The Dashboard screen

16.2.3. The Manage Departments screen

16.2.4. The Manage Employees screen

16.3. Constructing the ChartPanel components

16.3.1. The ChartPanelBaseCls

16.3.2. The CompanySnapshot class

16.3.3. The DepartmentBreakdown class

16.4. Constructing the listpanel components

16.4.1. The ListPanelBaseCls

16.4.2. The DepartmentsListView and EmployeeList classes

16.5. Constructing the EmployeeGridPanel class

16.6. The EmployeeAssociationWindow class

16.7. The form namespace

16.7.1. The FormPanelBaseCls class

16.7.2. The DepartmentForm class

16.7.3. The EmployeeForm class

16.8. Summary

Chapter 17. The application stack

17.1. Developing the application namespace

17.1.1. Reviewing the application screens

17.1.2. Designing the application namespace

17.2. Building the Dashboard screen

17.3. The Manage Employees screen

17.3.1. Discussing the workflow

17.3.2. Constructing EmployeeManager

17.4. The Manage Departments screen

17.4.1. The navigation and department CRUD workflows

17.4.2. Employee CRUD workflows

17.4.3. Employee association workflow

17.5. Piecing it all together

17.5.1. The workspace workflows

17.5.2. Constructing the workspace singleton

17.6. Summary

Index

List of Figures

List of Tables

List of Listings