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.
Table of Contents (15 chapters)
Ext JS 3.0 Cookbook
About the Author
About the Reviewer

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:

<link rel="stylesheet" type="text/css" 
<script type="text/javascript" src="../ext/ext-base.js"></script>
<script type="text/javascript" 
<script type="text/javascript"> 
Ext.BLANK_IMAGE_URL = '../ext/images/default/s.gif';
Ext.onReady(function() {
var colorsStore = new{
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();
<input type="text" id="colors-combo"/>

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.