Ext JS 3.0 Cookbook

Clear step-by-step recipes for building impressive rich internet applications using the Ext JS JavaScript library

Ext JS 3.0 Cookbook

Cookbook
Jorge Ramon

Clear step-by-step recipes for building impressive rich internet applications using the Ext JS JavaScript library
$10.00
$49.99
RRP $29.99
RRP $49.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 139781847198709
Paperback376 pages

About This Book

  • Master the Ext JS widgets and learn to create custom components to suit your needs
  • Build striking native and custom layouts, forms, grids, listviews, treeviews, charts, tab panels, menus, toolbars and much more for your real-world user interfaces
  • Packed with easy-to-follow examples to exercise all of the features of the Ext JS library
  • Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible

Who This Book Is For

The Ext JS Cookbook is for Ext JS users who want a book of useful techniques, with explanations, that they can refer to and adapt to their purposes. Developers who are already familiar with Ext JS will find practical guidance and numerous examples covering most of the library's features and components that can be used as a solid foundation to build upon when creating rich internet applications.

Table of Contents

Chapter 1: DOM and Data Types, the Ext JS Way
Introduction
Detecting browsers and platforms used by clients
Retrieving DOM nodes and elements
Acquiring references to Ext JS components
Running high-performance DOM queries
Encoding and decoding JSON
Encoding and decoding URL data
Determining the object type and converting empty references to a default value
Finding objects in an array and removing array items
Manipulating strings à la Ext JS
Effortless range checking for numbers
Formatting, parsing, and manipulating dates
Preventing naming conflicts and scoping non-global variables
Extending JavaScript objects, the Ext JS way
Adding features to the Ext JS classes
Building custom JavaScript classes that inherit the functionality of Ext JS
Chapter 2: Laying Out a Rich User Interface
Introduction
Laying out items within a container using CSS-style absolute positioning
Maintaining components' proportions when their containers are resized
Stacking items with an accordion layout
Wizard style UI using a card layout
Using a tabbed look
Taking all the browser window's real estate
Positioning components in multiple columns
Using the table layout
Creating a modern application layout with collapsible regions
A custom column layout
A three-panel application layout with a single line of code
Creating a portal and a portlets catalog
Chapter 3: Load, Validate, and Submit Forms
Introduction
Specifying the required fields in a form
Setting the minimum and maximum length allowed for a field's value
Changing the location where validation errors are displayed
Deferring field validation until form submission
Creating validation functions for URLs, email addresses, and other types of data
Confirming passwords and validating dates using relational field validation
Rounding up your validation strategy with server-side validation of form fields
Loading form data from the server
Serving the XML data to a form
Using forms for file uploads
Building friendlier forms using text hints
Chapter 4: Fun with Combo Boxes and Date Fields
Introduction
Using the combo box with local data
Displaying remote data with a combo box
Combo box with autocomplete
How the combo box helps you type
Converting an HTML drop-down list into an Ext combo box
Cascading combo boxes
Using templates to change the look of combo box items
Using paging to handle a large number of combo box items
The different ways to set up disabled dates in a date field
The date range selector
Chapter 5: Using Grid Panels to Display and Edit Tabular Data
Introduction
Displaying XML data sent by the server
Displaying JSON data generated by the server
Creating a grid that uses server-side sorting
Implementing data paging
Data grouping with live group summaries
Creating data previews
Creating a grid panel with expandable rows
Using checkboxes to select grid rows
Numbering rows in a grid panel
Changing grid panel data using cell editors
Automatic uploading of data edited with a grid
Performing batch uploads of data edited with a grid
Changing a grid's data store and columns at runtime
Chapter 6: More Applications of Grid and List Views
Introduction
Creating a master-details view with a grid and a panel
Creating a master-details view with a grid and a form
Creating a master-details view with a combo box and a grid
Creating a master-details view with two grids
Displaying large recordsets with a buffered grid
Using the lightweight ListView class
Editing rows with the RowEditor plugin
Adding tool tips to grid cells
Using the PropertyGrid class
Using drag-and-drop between two grids
Chapter 7: Keeping Tabs on Your Trees
Introduction
Handling tab activation
Loading tab data with Ajax
Adding tabs dynamically
Enhancing a TabPanel with plugins: The Close menu
Enhancing a TabPanel with plugins: The TabScroller menu
Populating tree nodes with server-side data
Tree and panel in a master-details relationship
The multi-column TreePanel
Drag-and-drop between tree panels
Drag-and-drop from a tree to a panel
Chapter 8: Making Progress with Menus and Toolbars
Introduction
Placing buttons in a toolbar
Working with the new ButtonGroup component
Placing menus in a toolbar
Commonly used menu items
Embedding a progress bar in a status bar
Creating a custom look for the status bar items
Using a progress bar to indicate that your application is busy
Using a progress bar to report progress updates
Changing the look of a progress bar
Chapter 9: Well-charted Territory
Introduction
Setting up a line chart to display local data
Setting up a line chart to display data retrieved from the server
Setting up a column chart to display local data
Setting up a column chart to display data retrieved from the server
Displaying local data with a pie chart
Displaying remote data with a pie chart
Using a chart component to display multiple data series
Creating an auto-refreshing chart
Configuring the Slider component to display a custom tip
Enhancing the Slider component with custom tick marks
Chapter 10: Patterns in Ext JS
Introduction
Sharing functionality with the Action class
Autosaving form values
Saving resources with lazy component instantiation
Extending a class
Using code modules to achieve encapsulation
Implementing a publish/subscribe mechanism with relayEvents()
Augmenting a class with a plugin
Building preconfigured classes
Implementing state preservation with cookies

What You Will Learn

  • Work with different browsers, platforms, and the DOM, as well as determine and understand the different ExtJS data types
  • Create your own custom Ext JS data types as you extend their functionality
  • Build great-looking and friendly forms by using client and server-side field validation, form loading, submission, field customization, and layout techniques
  • Explore the different layouts provided by the Ext JS library as well as create your own, and understand their common uses
  • Display, edit, and group tabular data generated by the server using Grid Panels
  • Explore the advantages and the efficiency tradeoffs of widgets such as Combo boxes
  • Use the drag and drop features of the grid component, data editing with the new RowEditor Class, and the new lightweight ListView component
  • Explore multiple ways of displaying master-details relationships
  • Group components or information under the same container to build hierarchical views of information by using TabPanel components
  • Use patterns to build a solid and flexible application architecture and implement additional design patterns such as auto-saving form elements, component state management, and code modules to build robust and flexible applications with Ext JS
  • Build your own custom components on top of the Ext framework and enhance the custom components created by the Ext JS users' community

In Detail

Using Ext JS you can easily build desktop-style interfaces in your web applications. Over 400,000 developers are working smarter with Ext JS and yet most of them fail to exercise all of the features that this powerful JavaScript library has to offer.

Get to grips with all of the features that you would expect with this quick and easy-to-follow Ext JS Cookbook. This book provides clear instructions for getting the most out of Ext JS with and offers many exercises to build impressive rich internet applications. This cookbook shows techniques and "patterns" for building particular interface styles and features in Ext JS. Pick what you want and move ahead.

It teaches you how to use all of the Ext JS widgets and components smartly, through practical examples and exercises. Native and custom layouts, forms, grids, listviews, treeviews, charts, tab panels, menus, toolbars, and many more components are covered in a multitude of examples.The book also looks at best practices on data storage, application architecture, code organization, presenting recipes for improving them—our cookbook provides expert information for people working with Ext JS.

Authors

Table of Contents

Chapter 1: DOM and Data Types, the Ext JS Way
Introduction
Detecting browsers and platforms used by clients
Retrieving DOM nodes and elements
Acquiring references to Ext JS components
Running high-performance DOM queries
Encoding and decoding JSON
Encoding and decoding URL data
Determining the object type and converting empty references to a default value
Finding objects in an array and removing array items
Manipulating strings à la Ext JS
Effortless range checking for numbers
Formatting, parsing, and manipulating dates
Preventing naming conflicts and scoping non-global variables
Extending JavaScript objects, the Ext JS way
Adding features to the Ext JS classes
Building custom JavaScript classes that inherit the functionality of Ext JS
Chapter 2: Laying Out a Rich User Interface
Introduction
Laying out items within a container using CSS-style absolute positioning
Maintaining components' proportions when their containers are resized
Stacking items with an accordion layout
Wizard style UI using a card layout
Using a tabbed look
Taking all the browser window's real estate
Positioning components in multiple columns
Using the table layout
Creating a modern application layout with collapsible regions
A custom column layout
A three-panel application layout with a single line of code
Creating a portal and a portlets catalog
Chapter 3: Load, Validate, and Submit Forms
Introduction
Specifying the required fields in a form
Setting the minimum and maximum length allowed for a field's value
Changing the location where validation errors are displayed
Deferring field validation until form submission
Creating validation functions for URLs, email addresses, and other types of data
Confirming passwords and validating dates using relational field validation
Rounding up your validation strategy with server-side validation of form fields
Loading form data from the server
Serving the XML data to a form
Using forms for file uploads
Building friendlier forms using text hints
Chapter 4: Fun with Combo Boxes and Date Fields
Introduction
Using the combo box with local data
Displaying remote data with a combo box
Combo box with autocomplete
How the combo box helps you type
Converting an HTML drop-down list into an Ext combo box
Cascading combo boxes
Using templates to change the look of combo box items
Using paging to handle a large number of combo box items
The different ways to set up disabled dates in a date field
The date range selector
Chapter 5: Using Grid Panels to Display and Edit Tabular Data
Introduction
Displaying XML data sent by the server
Displaying JSON data generated by the server
Creating a grid that uses server-side sorting
Implementing data paging
Data grouping with live group summaries
Creating data previews
Creating a grid panel with expandable rows
Using checkboxes to select grid rows
Numbering rows in a grid panel
Changing grid panel data using cell editors
Automatic uploading of data edited with a grid
Performing batch uploads of data edited with a grid
Changing a grid's data store and columns at runtime
Chapter 6: More Applications of Grid and List Views
Introduction
Creating a master-details view with a grid and a panel
Creating a master-details view with a grid and a form
Creating a master-details view with a combo box and a grid
Creating a master-details view with two grids
Displaying large recordsets with a buffered grid
Using the lightweight ListView class
Editing rows with the RowEditor plugin
Adding tool tips to grid cells
Using the PropertyGrid class
Using drag-and-drop between two grids
Chapter 7: Keeping Tabs on Your Trees
Introduction
Handling tab activation
Loading tab data with Ajax
Adding tabs dynamically
Enhancing a TabPanel with plugins: The Close menu
Enhancing a TabPanel with plugins: The TabScroller menu
Populating tree nodes with server-side data
Tree and panel in a master-details relationship
The multi-column TreePanel
Drag-and-drop between tree panels
Drag-and-drop from a tree to a panel
Chapter 8: Making Progress with Menus and Toolbars
Introduction
Placing buttons in a toolbar
Working with the new ButtonGroup component
Placing menus in a toolbar
Commonly used menu items
Embedding a progress bar in a status bar
Creating a custom look for the status bar items
Using a progress bar to indicate that your application is busy
Using a progress bar to report progress updates
Changing the look of a progress bar
Chapter 9: Well-charted Territory
Introduction
Setting up a line chart to display local data
Setting up a line chart to display data retrieved from the server
Setting up a column chart to display local data
Setting up a column chart to display data retrieved from the server
Displaying local data with a pie chart
Displaying remote data with a pie chart
Using a chart component to display multiple data series
Creating an auto-refreshing chart
Configuring the Slider component to display a custom tip
Enhancing the Slider component with custom tick marks
Chapter 10: Patterns in Ext JS
Introduction
Sharing functionality with the Action class
Autosaving form values
Saving resources with lazy component instantiation
Extending a class
Using code modules to achieve encapsulation
Implementing a publish/subscribe mechanism with relayEvents()
Augmenting a class with a plugin
Building preconfigured classes
Implementing state preservation with cookies

Book Details

ISBN 139781847198709
Paperback376 pages
Read More