Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Ext JS 3.0 Cookbook
  • Table Of Contents Toc
Ext JS 3.0 Cookbook

Ext JS 3.0 Cookbook

4.7 (6)
Buy this Book
close
close
Ext JS 3.0 Cookbook

Ext JS 3.0 Cookbook

4.7 (6)
Buy this Book

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

Acquiring references to Ext JS components

As Ext JS is all about working with components, it's essential to learn how to acquire a reference to any component in your code. For example, this recipe shows how easy it is to reference a ComboBox component.

How to do it...

You can reference a ComboBox component as shown in the following code: 

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" 
href="../ext/css/ext-all.css"/>
<script type="text/javascript" src="../ext/ext-base.js"></script>
<script type="text/javascript" 
src="../ext/ext-all-debug.js"></script>
<script type="text/javascript"> 
Ext.BLANK_IMAGE_URL = '../ext/images/default/s.gif';
Ext.onReady(function() {
var colorsStore = new Ext.data.SimpleStore({
fields: ['name'],
data: [['Blue'],['Red'],['White']]
});
var combo = new Ext.form.ComboBox({
store: colorsStore,
displayField: 'name',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a color...',
selectOnFocus: true,
applyTo: 'colors-combo',
id: 'colors-combo'
});
// Get a reference to the combobox using Ext.getCmp(id).
var combo = Ext.getCmp("colors-combo");
// Using the reference to the combo, add a handler to the
//'select' event.
combo.on('select', function() {
Ext.Msg.alert('Using Ext.getCmp(id)', 
The selected color is ' + combo.getValue();
});
});
</script>
</head>
<body>
<input type="text" id="colors-combo"/>
</body>
</html>

How it works...

References to components are obtained using the Ext.getCmp(id) function, where id is the ID of the component. Keeping track of components is possible, thanks to the ComponentMgr class. It provides for easy registration, un-registration and retrieval, as well as notifications when components are added or removed.

There's more...

This method is particularly useful when explicit component references do not already exist in your code, for example when components are defined as part of the items collection of a container. (Think of a tab panel and its tabs, or a border layout and its contained panels.)

There are other DOM and component utilities provided by Ext JS:

  • Ext.getBody() returns the body of the document as an Ext.Element

  • Ext.getDoc() returns the current HTML document as an Ext.Element

  • Ext.getDom(id) returns the DOM node for the supplied ID, DOM node, or element

See also...

  • The Retrieving DOM nodes and elements recipe, covered earlier in this chapter, explains how to get a handle on any DOM element.

  • The next recipe, Running high-performance DOM queries, teaches you about running queries against the DOM.

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Ext JS 3.0 Cookbook
End of Section 1
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon