Book Image

Ext JS 3.0 Cookbook

Book Image

Ext JS 3.0 Cookbook

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
Ext JS 3.0 Cookbook
Oct, 2009 | 376 pages
No titles found
Table of Contents (15 chapters)
Ext JS 3.0 Cookbook
Ext JS 3.0 Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
Preface
Preface
Free Chapter
1
DOM and Data Types, the Ext JS Way
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
2
Laying Out a Rich User Interface
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
3
Load, Validate, and Submit Forms
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
4
Fun with Combo Boxes and Date Fields
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
5
Using Grid Panels to Display and Edit Tabular Data
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
6
More Applications of Grid and List Views
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
7
Keeping Tabs on Your Trees
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
8
Making Progress with Menus and Toolbars
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
9
Well-charted Territory
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
10
Patterns in Ext JS
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

Embedding a progress bar in a status bar

This recipe explains how to embed a progress bar in a panel's status bar, a scenario found in countless user interfaces:

How to do it...

  1. 1. Create a click handler that will simulate a long-running activity and update the progress bar:

    Ext.onReady(function() {
var loadFn = function(btn, statusBar) {
btn = Ext.getCmp(btn);
btn.disable();
Ext.fly('statusTxt').update('Saving...');
pBar.wait({
interval: 200,
duration: 5000,
increment: 15,
fn: function() {
btn.enable();
Ext.fly('statusTxt').update('Done');
}
});
};

  2. 2. Create an instance of the progress bar: 

    var pBar = new Ext.ProgressBar({
id: 'pBar',
width: 100
});

  3. 3. Create a host panel and embed the progress bar in the bbar of the panel. Also, add a button that will start the progress bar updates:

    var pnl = new Ext.Panel({
title: 'Status bar with progress bar',
renderTo: 'pnl1',
width: 400,
height: 200,
bodyStyle: 'padding:10px;',
items: [{
xtype: 'button',
id: 'btn',
text: 'Save',
width:'75',
handler:...
Previous Section
End of Section 7
Next Section