List of Figures

Chapter 1. A framework apart

Figure 1.1. Conjoon is an open source personal information manager that’s a great example of a web application that uses the framework to manage a UI that leverages 100 percent of the browser’s viewport. You can download it at http://conjoon.org/.

Figure 1.2. The Dow Jones Indexes website, http://djindexes.com, is one example of Ext JS embedded in a traditional Web 1.0 site.

Figure 1.3. The Ext JS API Documentation contains a wealth of information and is a great resource for learning more about components and widgets. It contains most of what you need to know about the API, including constructor configuration options, methods, events, properties, component hierarchy, and more.

Figure 1.4. The six areas of purpose for Ext JS classes: Ext JS Core, UI components, web remoting, data services, drag and drop, and general utilities

Figure 1.5. Here, you see two parent Containers, Panel (left) and Window (right), managing child items, which include nested children.

Figure 1.6. Commonly used subclasses of Container—FormPanel, TabPanel, FieldSet, and QuickTip—and the layouts used to compose this UI Panel. We’ll build this in chapter 6, where you learn about forms.

Figure 1.7. The GridPanel as seen in the Buffered Grid example in the Ext JS SDK

Figure 1.8. The DataView (left) and ListView (right) as shown in the Ext JS SDK examples

Figure 1.9. An Ext JS Tree, which is an example from the Ext JS SDK

Figure 1.10. All of the out-of-the-box form elements displayed in an encapsulating Window

Figure 1.11. An example of the Checkbox and RadioGroup convenience classes in action with automatic layouts.

Figure 1.12. A custom ComboBox, which includes an integrated paging toolbar, as shown in the downloadable Ext JS examples

Figure 1.13. Miscellaneous UI widgets and controls

Figure 1.14. The new ToolbarLayout is responsible for detecting the toolbar’s size and creating menu stubs if menu items overflow.

Figure 1.15. An example of the VBox and HBox layouts in action

Figure 1.16. The new Ext.ListView class, which is like a lightweight DataGrid

Figure 1.17. These charts now bring rich graphical views of trend data to the framework. It’s important to note that this new widget requires Flash.

Figure 1.18. A view of the Ext JS SDK contents

Figure 1.19. Our first Ext JS window attempting to load content via Ajax

Figure 1.20. Our Ext JS Window loading the our HTML fragment (left) and the highlight effect performed on the Window’s content body (right)

Chapter 2. Back to the basics

Figure 2.1. The result of our Ext.onReady call, an Ext.MessageBox window

Figure 2.2. Our base page with our stylized div ready for some Ext Element action

Figure 2.3. A composite of the element additions using myDiv1.createChild()

Figure 2.4. The results of our targeted DOM element insertions with createChild() using an index and insertFirst()

Figure 2.5. Loading an HTML fragment into the document body

Figure 2.6. Using our first template to append nodes to the DOM, shown in the exploded view in Firebug

Figure 2.7. The result of our complex template with a DOM view in Firebug

Figure 2.8. The result of using XTemplate with an exploded DOM view from Firebug

Figure 2.9. The results from the advanced XTemplate exercise

Chapter 3. Events, Components, and Containers

Figure 3.1. The W3C Event model, where events first flow downward (capture) and then return up the tree (bubbling)

Figure 3.2. The results of our click event handlers in the Firebug console

Figure 3.3. Displaying our custom context menu by means of a contextmenu event handler

Figure 3.4. A Firebug console message being displayed, indicating that the registered handler for the sayHello event was triggered

Figure 3.5. A Firebug console message displays as the result of the firing of the sayGoodbye event.

Figure 3.6. This illustration of the Ext class hierarchy focuses on some of the common subclasses of Ext.Component and depicts how widely the Component model is used in the framework.

Figure 3.7. The results of our XType exercise: an Ext Window, which has two child panels derived from XType configuration objects

Figure 3.8. The Ext Component lifecycle always starts with initialization and always ends with destruction. The Component need not enter the render phase to be destroyed.

Figure 3.9. The initialization phase of the Component lifecycle executes important steps such as event and Component registration as well as the calling the initComponent method. It’s important to remember that a Component can be instantiated but may not be rendered.

Figure 3.10. The render phase of the a Component’s life can utilize a lot of CPU because it requires elements to be added to the DOM and calculations to be performed to properly size and manage them.

Figure 3.11. The destruction portion of a Component’s life is equally as important as its initialization because event listeners and DOM elements must be deregistered and removed, reducing overall memory usage.

Figure 3.12. The rendered Container UI from listing 3.1

Figure 3.13. The rendered results of our dynamically added and inserted child panels

Figure 3.14. Our first Viewport, which takes up 100 percent of the browser’s available viewing space

Chapter 4. A place for Components

Figure 4.1. An example of a fully loaded Panel, which has a title bar with an icon and tools, top and bottom Toolbars, and a button bar on the bottom

Figure 4.2. The rendered results of listing 4.1, where you create a complex collapsible Panel with top and bottom Toolbars that each contain Buttons

Figure 4.3. The rendered results from listing 4.2, which add a Button in the button bar as well as tools to the title bar

Figure 4.4. An Ext modal Window, which masks the browser’s viewport

Figure 4.5. The rendered results from listing 4.3, where you create a Window that animates from the Button’s element when clicked

Figure 4.6. Our first strict modal Window rendered in the Ext SDK feed viewer example

Figure 4.7. The MessageBox’s alert (left) and prompt (right) modal dialog Windows

Figure 4.8. A multiline input box with an icon (left) and a tri-button icon alert box (right)

Figure 4.9. A simple animated MessageBox wait dialog where the ProgressBar is looping infinitely at a predetermined fixed interval (left) and a similar message box with text in the progress bar (right)

Figure 4.10. Your automatically updating wait MessageBox (left) with the final update (right) before automatic dismissal

Figure 4.11. Exploring top- and bottom-positioned tabs

Figure 4.12. A TabPanel with children that have complex layouts

Figure 4.13. A child Panel whose layout has not been properly recalculated after a parent’s resize

Figure 4.14. Your first TabPanel rendered inside a Window

Figure 4.15. A TabPanel with a scrolling tab strip, which includes mouseover tooltips for the dynamic tabs

Figure 4.16. A TabPanel that has no minimum tab width (top) specified and a TabPanel (bottom) that has a minimum tab width of 75 specified

Chapter 5. Organizing Components

Figure 5.1. The layout class hierarchy, where layouts are subclasses of the ContainerLayout

Figure 5.2. The results of our first implementation of the ContainerLayout

Figure 5.3. The rendered results of our first implementation of the AnchorLayout

Figure 5.4. Using offsets with an AnchorLayout with sizing calculations

Figure 5.5. Using the FormLayout

Figure 5.6. Using offsets to create a much fuller form

Figure 5.7. The results of our AnchorLayout implementation

Figure 5.8. Using the FitLayout for the first time

Figure 5.9. The AccordionLayout is an excellent way to present the user with multiple items as a single visible Component.

Figure 5.10. Our first CardLayout implementation with a fully interactive navigation Toolbar

Figure 5.11. Our first ColumnLayout, which uses relative column widths with a fixed width entity

Figure 5.12. Different results with the three pack options

Figure 5.13. The 'stretch' alignment will always override any height values specified by the child items.

Figure 5.14. The results of our first simple TableLayout

Figure 5.15. When using the TableLayout, you could specify rowspan and colspan for a particular Component, which will make it occupy more than one cell in the table.

Figure 5.16. The BorderLayout is what attracts many new developers to the Ext Framework and is widely used in many applications to divide the screen into task-specific functional areas.

Figure 5.17. The BorderLayout’s versatility and ease of use make it one of the most widely used in Ext-based RIAs.

Figure 5.18. Our BorderLayout where two of the regions, North and East, are collapsed in regular mode and the West panel is collapsed in miniature mode

Chapter 6. Ext JS takes form

Figure 6.1. The rendered results of our FormPanel, which contains four TextFields

Figure 6.2. 'side' validation error messages

Figure 6.3. Our password and file upload fields with data filled in (left) and an example of the side validation error icons (right)

Figure 6.4. An example UI of a remote loading and paging ComboBox with type-ahead

Figure 6.5. An example rendering of our ComboBox from listing 6.3 inside a Window

Figure 6.6. An example rendition of our remote loading ComboBox from listing 6.4

Figure 6.7. An exploded view of a slice of the served-up JSON

Figure 6.8. Adding pagination to our remote ComboBox

Figure 6.9. An example rendition of our customized ComboBox

Figure 6.10. Our rendered generic TimeField

Figure 6.11. Our first HtmlEditor in an Ext Window

Figure 6.12. The DateField the DatePicker exposed (left) and the DatePicker’s month and year selection tool (right)

Figure 6.13. Our first four Checkboxes

Figure 6.14. Two implementations of the CheckboxGroup: single horizontal line (left) and a two-column layout (right)

Figure 6.15. A single column of Radios

Figure 6.16. A sneak peek of the complex FormPanel we’re going to build

Figure 6.17. The results of our first complex layout form with the different Containers used to compose the complex layouts

Figure 6.18. The results from our server-side errors object using the standard QuickTip error msg

Figure 6.19. The results of loading our data via XHR

Chapter 7. The venerable GridPanel

Figure 7.1. The array grid example, found in the examples folder of the downloadable SDK

Figure 7.2. The GridPanel’s five supporting classes: data Store, GridView, ColumnModel, Column, and SelectionModel

Figure 7.3. The data Store and the classes it feeds data to. This illustration doesn’t depict class hierarchy.

Figure 7.4. The data flow from a data source to a data Store consumer

Figure 7.5. The DataProxy and its four subclasses. Each is responsible for retrieving data from a specific data source.

Figure 7.6. A Reader maps raw or unformatted data so that it can be inserted into Records, which then get spooled into a data Store.

Figure 7.7. Our first grid rendered onscreen demonstrating the singleselect configured RowSelectionModel and the sortable Full Name Column

Figure 7.8. The format in which a remote server must respond

Figure 7.9. The results of our advanced paging GridPanel implementation.

Figure 7.10. A list of parameters sent to the remote server to request paged data

Figure 7.11. Enabling the ID column via the Columns menu

Figure 7.12. The results of adding the context menu handler to our advanced grid

Chapter 8. The EditorGridPanel

Figure 8.1. A quick peek at what you’ll be constructing

Figure 8.2. Our first EditorGridPanel

Figure 8.3. Our first EditorGridPanel with an editor and dirty field markers

Figure 8.4. Our EditorGridPanel with Save Changes and Reject Changes buttons added

Figure 8.5. The load mask shows when save requests are being sent to the server.

Figure 8.6. Inspecting our Ajax.request POST parameter in Firebug

Figure 8.7. Adding a new Record with our newly configured Insert Record menu item

Figure 8.8. The UI transitions when saving our newly inserted Record

Figure 8.9. Using Firebug to inspect the JSON being submitted for our newly inserted Record

Figure 8.10. A Firebug view of a newly inserted Record followed by a subsequent update

Figure 8.11. The UI workflow for deleting a Record

Figure 8.12. The controller request to delete a Record as viewed in Firebug’s XHR inspection tool

Figure 8.13. A depiction of the flow for data reads and writes when a data Store is used

Figure 8.14. The result of our update request as shown in Firebug’s request inspection tool

Figure 8.15. The server-side response from our update request with Writer

Figure 8.16. Inserting a Record with Writer, as viewed in the Firebug request inspection tool

Figure 8.17. Using Firebug to inspect the results of a Record insert using Writer

Figure 8.18. The JSON parameters for a delete action request

Figure 8.19. The result of our delete action request using Writer

Chapter 9. DataView and ListView

Figure 9.1. The DataView and various supporting classes

Figure 9.2. An unstyled (left) DataView compared to a styled (right) DataView

Figure 9.3. A rendered HTML fragment as viewed in Firebug’s DOM inspection panel

Figure 9.4. The exploded HTML fragment that can be produced by the XTemplate with a for loop

Figure 9.5. The rendered DataView

Figure 9.6. Because there are too many Records onscreen, the simple act of resizing the browser results in a visual delay of the Ext Viewport resize.

Figure 9.7. The ListView (left) rendered with the DataView (right)

Figure 9.8. The ListView’s (left) click event now filters the DataView (right).

Figure 9.9. The addition of the FormPanel and the required event model

Figure 9.10. The ListView (left), DataView (center), and FormPanel (right)

Figure 9.11. Testing the DataView to FormPanel binding

Figure 9.12. Testing the round-trip binding of the FormPanel to the DataView

Chapter 10. Charts

Figure 10.1. An example LineChart with a custom tip

Figure 10.2. The Chart class hierarchy

Figure 10.3. The LineChart with two LineSeries

Figure 10.4. BarChart (left) and StackedBarChart (right) examples

Figure 10.5. The ColumnChart (left) and StackedColumnChart (right)

Figure 10.6. A PieChart

Figure 10.7. Our first LineChart

Figure 10.8. Our LineChart with our custom ToolTip

Figure 10.9. Categories of data are clearly defined in this car sales LineChart.

Figure 10.10. Adding y-axis titles without custom styling results in wasted screen space.

Figure 10.11. The yAxis is now rotated -90 degrees, which reduces wasted space.

Figure 10.12. Our multiline Chart with much more custom styling

Figure 10.13. The addition of the legend enhances readability for multiseries Charts.

Figure 10.14. A multiseries ColumnChart

Figure 10.15. Our StackedColumnChart

Figure 10.16. Our hybrid LineChart and ColumnChart

Figure 10.17. The StackedBarChart

Figure 10.18. The BarChart with an integrated LineSeries

Figure 10.19. The PieChart rendered onscreen with custom colors and a generic ToolTip

Figure 10.20. The PieChart with a custom ToolTip

Chapter 11. Taking root with trees

Figure 11.1. Our first (expanded) TreePanel with the root Node visible (left) and the root Node hidden (right)

Figure 11.2. Our remote TreePanel displaying its ability to load data remotely

Figure 11.3. The post parameter of the initial Node request

Figure 11.4. The results of the initial request to the getCompany.php controller

Figure 11.5. The results from the Accounting department Node request

Figure 11.6. Displaying our dynamic context menu for the company (left), department (center), and employee (right) Nodes

Figure 11.7. The results of editing a Node in the TreePanel using the TreeEditor with an Ajax.request to save the data

Figure 11.8. Deleting a Node with a confirmation box and an Ajax.request to the server

Figure 11.9. Adding a new Node to our TreePanel using the TreeEditor

Chapter 12. Menus, Buttons, and Toolbars

Figure 12.1. Our newDepartment Menu Item (left) and the Item handler (right) in action

Figure 12.2. The result of adding an Icon to a Menu Item via the iconCls configuration property

Figure 12.3. The addition of a Menu Item with a submenu

Figure 12.4. Adding a menu.Separator (horizontal line) to our Menu

Figure 12.5. Choosing not to style a TextItem (left) will result in an incomplete look and feel for your Menu. Adding a touch of style (right) will clean up the Menu.

Figure 12.6. The rendered results of the ColorMenu (left) and DateMenu (right)

Figure 12.7. A check view menu in OS X, where the user selection is persisted

Figure 12.8. Clicking our CheckItem (left) makes a check icon appear and triggers the checkHandler (right).

Figure 12.9. A group of CheckItems (left), where only one item can be selected (center and right)

Figure 12.10. Our Button in action (left) and the frame effect (right), which is a visual indication that the handler was called

Figure 12.11. Adding a Menu to a Button, which contains a few menu CheckItems

Figure 12.12. Our SplitButton in action

Figure 12.13. Various implementations of the SplitButton with the possible icon and arrow alignments

Figure 12.14. Our first ButtonGroup in action

Figure 12.15. The Clipboard button group as found in MS Word 2007 for Windows

Figure 12.16. Our modified ButtonGroup (left) versus the Microsoft Word 2007 Button group (right)

Figure 12.17. Our Toolbar rendered inside a Window

Figure 12.18. ButtonGroups used in a Toolbar as seen in the Ext Surf live chat application

Figure 12.19. The results of listing 12.13, where Actions are being used to configure Buttons and Menu Items

Chapter 13. Drag-and-drop basics

Figure 13.1. Desktop drag-and-drop interaction as seen in Mac OS X, where a drag proxy (left) is created upon an item drag event and a drop invitation is being displayed (right)

Figure 13.2. The drag-and-drop class hierarchy can be broken up into two major sections, drag (left) and drop (right).

Figure 13.3. The locker room HTML rendered

Figure 13.4. Drag enabled on the locker room elements without constraints

Figure 13.5. Inspecting the DOM for the Jack element (highlighted) before a drag operation takes place

Figure 13.6. Observing the changes that the drag operation makes on the Jack element

Figure 13.7. The Pool and Hot Tub HTML rendered onscreen

Figure 13.8. Condition al drop invitation for the male nodes

Figure 13.9. The conditional drop invitation for the female nodes

Figure 13.10. Male and female nodes can now be dropped onto the pool and hot tub drop targets.

Figure 13.11. The DDProxy in action with one of our male drag elements

Chapter 14. Drag and drop with widgets

Figure 14.1. The DragDrop class hierarchy

Figure 14.2. The outcome of our DataView construction

Figure 14.3. Our rendered DataViews inside an Ext.Window

Figure 14.4. The StatusProxy, indicating that a drop is possible (left) or not (right)

Figure 14.5. DragZone with a custom DragProxy

Figure 14.6. The areas where automatic scrolling will take place

Figure 14.7. The StatusProxy now shows that a drop gesture can occur on the drop zone.

Figure 14.8. We’ve successfully dragged and dropped three Records from the left DataView to the right.

Figure 14.9. The two department GridPanels side by side

Figure 14.10. Drag gestures enabled in the GridPanel

Figure 14.11. The drop invitation with mouseover row-tracking drop index

Figure 14.12. The below-row drop invitation

Figure 14.13. The two TreePanels

Figure 14.14. Drag and drop enabled on TreePanels

Figure 14.15. Testing our drop target constraint logic

Chapter 15. Extensions and plug-ins

Figure 15.1. Instantiating an instance of BaseCar and exercising two of its methods

Figure 15.2. Our PremiumCar subclass in action

Figure 15.3. The results of the instantiation of the PremiumCar class

Figure 15.4. Our extension

Figure 15.5. The GridPanel class hierarchy with our ContextMenuGridPanel extension

Figure 15.6. A proposed class hierarchy, where code duplication is possible

Figure 15.7. Our first plug-in

Figure 15.8. The TabScrollerMenu

Figure 15.9. A plug-in that adds an animated ProgressBar to the PagingToolbar

Chapter 16. Developing for reusability

Figure 16.1. An example namespace with little segmentation

Figure 16.2. The different layers of a larger application

Figure 16.3. The application login screen window

Figure 16.4. The UserLoginWindow inside the TKE namespace

Figure 16.5. Analyzing the application layout and Dashboard screen

Figure 16.6. The TKE.chartpanel namespace configuration

Figure 16.7. The Manage Departments screen

Figure 16.8. Adding the listpanel, grid, and form namespace objects to the TKE namespace

Figure 16.9. The Edit employee form embedded and displayed in a Window

Figure 16.10. The TKE namespace with the added EmployeeForm and FormPanelBaseCls classes

Figure 16.11. The employee association Window

Figure 16.12. The TKE namespace with the added window namespace object and EmployeeAssociationWindow class

Figure 16.13. The Manage Employees screen

Figure 16.14. The TKE namespace modified to include the EmployeeList class

Figure 16.15. The Edit employee form embedded and displayed in a Window

Chapter 17. The application stack

Figure 17.1. The Dashboard screen

Figure 17.2. The Manage Departments screen

Figure 17.3. The Edit employee Window

Figure 17.4. The Manage Employees screen

Figure 17.5. The application namespace layout

Figure 17.6. The Manage Employees screen context sensitivity

Figure 17.7. The Manage Departments screen

Figure 17.8. The Manage Departments navigation and new department workflows

Figure 17.9. The department save workflows

Figure 17.10. The delete department workflow

Figure 17.11. The EmployeeEditorWindow widget in action

Figure 17.12. The create and edit employee workflows

Figure 17.13. The employee save

Figure 17.14. The DepartmentManager employee save workflow

Figure 17.15. The delete employee workflow logic

Figure 17.16. The AssociateEmployeeWindow in action

Figure 17.17. The employee association logic workflow