What do you get with eBook?

Instant access to your Digital eBook purchase

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Buy Now

Ext JS 3.0 Cookbook

Chapter 1. DOM and Data Types, the Ext JS Way

In this chapter, you will learn the following recipes:

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

Introduction

In this chapter, you will learn how to accomplish tasks related to working with different browsers, platforms, the Document Object Model (DOM), and the Ext JS data types. You will also take in how to create custom data types that extend the functionality of the native Ext JS types.

Detecting browsers and platforms used by clients

Although Ext JS is a cross-browser library, there are instances when your application needs to show a different behavior depending on the user's browser or platform. Browser and platform detection are very simple tasks with Ext JS, and this recipe shows how it's done.

How to do it...

You can detect various browsers and platforms used by your clients in the following way:

You can use Ext.isChrome to find out if the detected browser is Chrome:

var browser = "";
if (Ext.isChrome) {
browser = "Hi! I'm the new kid on the block";
}

The browsers such as Mozilla and Firefox that use the Gecko rendering engine are detected with Ext.isGecko, Ext.isGecko2, and Ext.isGecko3:
```
if (Ext.isGecko) {
browser = "Gecko";
}
if (Ext.isGecko2) {
browser = "Gecko2";
}
if (Ext.isGecko3) {
browser = "We like Firefox!";
}
```

The Internet Explorer versions are flagged by Ext.isIE, Ext.isIE6, Ext.isIE7, and Ext.isIE8:

if (Ext.isIE) {
browser = "IE";
}
if (Ext.isIE6) {
browser = "Get a decent browser, now!";
}
if (Ext.isIE7) {
browser = "IE7";
}
if (Ext.isIE8) {
browser = "IE8";
}

Opera is detected with Ext.isOpera:

if (Ext.isOpera) {
browser = "Opera";
}

And finally, Safari is detected with Ext.isSafari, Ext.isSafari2, Ext.isSafari3, and Ext.isSafari4:

if (Ext.isSafari) {
browser = "Safari";
}
if (Ext.isSafari2) {
browser = "Safari2";
}
if (Ext.isSafari3) {
browser = "Safari3";
}
if (Ext.isSafari4) {
browser = "Safari4";
}

When it comes to platform detection, Adobe's Air is detected with Ext.isAir:
```
var platform = "";
if (Ext.isAir) {
platform = "Air";
}
```

Linux is detected withExt.isLinux:

if (Ext.isLinux) {
platform = "Linux";
}

Mac OS is detected with Ext.isMac:
```
if (Ext.isMac) {
platform = "Mac";
}
```

Windows is detected with Ext.isWindows:

if (Ext.isWindows) {
platform = "Windows ";
}

How it works...

As you can imagine, the values for Ext JS's browser and platform type flags are all obtained from parsing the value of the userAgent property of the JavaScript navigator object.

There's more...

Use this recipe when you need to alter the features or behavior of your application depending on the browser or platform being used. For example, depending on the platform used, you can provide Mac or Windows versions of a browser plugin; or you can account for rendering differences of various browsers when positioning DOM elements.

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

Running high-performance DOM queries

Now you'll see how to run queries against the DOM using Ext JS—a must-have when you need to manipulate or perform actions on multiple, related DOM elements. The examples show how to reference all the div elements in a document, obtain all the elements with a CSS class name msg, and iterate over the options of a select element.

How to do it...

The following code snippets are examples of how to run high-performance queries against the DOM using Ext JS:

When you need to retrieve the elements that match the div selector to find the div elements in the document, use the following code snippet:

Ext.onReady(function() {
// Get all the div elements.
var nodes = Ext.query('div');
Ext.each(nodes, function(item, index, allItems) {
document.write(index + '<br/>');
});
});

When you need to reference the elements with the class name msg, use the following code snippet:

var msgLinks = Ext.query('.msg');
Ext.each(msgLinks, function(item,index) {
// Do something with the element here.
});

When you want to iterate over the options of a select element, use the following code snippet:

var select = Ext.get('countries-select');
Ext.each(select.options, function(item,index) {
// Do something with the item here.
});

How it works...

The previous examples use Ext.query(path, [root]), a shorthand of Ext.DomQuery.select(path, [root]), to retrieve an array of DOM nodes that match a given selector.

There's more...

DomQuery provides high-performance selector/XPath processing by compiling queries into reusable functions. It works on HTML and XML documents, supports most of the CSS3 selector's specification as well as some custom selectors and basic XPath, and allows you to plug new pseudo classes and matchers.

Encoding and decoding JSON

Converting JavaScript and Ext JS objects to JSON, and converting JSON data back to JavaScript objects is easily achievable with Ext JS. For example, here's how to JSON-encode an array and how to rebuild the array from its JSON representation:

Note

JavaScript Object Notation (JSON) is a lightweight text format where an object is represented with an unordered set of name/value pairs and an array with an ordered collection of values.

JSON is completely language independent, easy for humans to read and write, and easy for machines to parse and generate. These properties make JSON an ideal data-interchange format.

Find out more about JSON at www.json.org.

How to do it...

Let's encode an array of colors using the following steps:

1. Create an array called colorsArray:
```
var colorsArray = new Array();
```

2. Put some values in the array:

colorsArray[0] = 'Blue';
colorsArray[1] = 'Red';
colorsArray[2] = 'White';

3. Now, convert to JSON:
```
var colorsJson = Ext.encode(colorsArray);
```
The value of the colorsJson variable should be the string ["Blue","Red","White"] string
4. Let's re-create the array based on its JSON string. Take the JSON representation of colorsArray:
```
var colorsJson = '["Blue","Red","White"]';
```

5. Parse the JSON and rebuild the array:

var colorsArray = Ext.decode(colorsJson);

After this, colorsArray contains the colors data: colorsArray[0] is 'Blue', colorsArray[1] is 'Red', and colorsArray[2] is 'White'.

How it works...

To obtain a JSON representation of an array, object, or other value, pass the value to Ext.util.JSON.encode(object). You can also use the shorthand, Ext.encode(object).

You can parse a JSON string by using Ext.util.JSON.decode(json), or its shorthand Ext.decode(json).

While decoding JSON involves simply calling the JavaScript eval(String) function, the encoding process is more complicated and requires different implementations depending on the data type being encoded. Internally, the encode(object) function calls specialized encoding functions for arrays, dates, Boolean values, strings, and other types.

You can also set the Ext.USE_NATIVE_JSON property to true, which will cause calls to encode(object) and decode(json) to use the browser's native JSON handling features. This option is turned off by default. If you turn it on, beware that native JSON methods will not work on objects that have functions, and that property names should be quoted in order for the data to be correctly decoded.

There's more...

JSON encoding and decoding is a pillar of modern web development, given the role of JSON—a language-independent, data-interchange format—in facilitating communications between the client-side and server-side of web applications. For instance, you can expect to find JSON manipulation when your application needs to send data to the server, as well as when the application needs to dynamically create objects from server-supplied data.

Encoding and decoding URL data

Two-way conversion between objects and URL data is a challenge that Ext JS can help with. Let's examine how a JavaScript object can be encoded for transmission through the URL query string, as well as how information contained in a URL can be used to build a JavaScript object.

How to do it...

The following steps will guide you through the process of encoding and decoding URL data:

1. Take a selectedColors object as the data to be passed in a URL:

var selectedColors = {color1:'Blue', color2:'Red', color3:'White'};

2. Convert the object to URL data like this:

var encodedUrl = Ext.urlEncode(selectedColors);
// encodedUrl is an encoded URL query string:
//color1=Blue&color2=Red&color3=White.

3. Now, a URL can be built using the data just created. For example, http://MyGreatApp/SetSelectedColors?color1=Blue&color2=Red&color3=White.
4. You can easily create objects from the encoded URL. Assuming we obtained the data from the URL we used above (http://MyGreatApp/SetSelectedColors?color1=Blue&color2=Red&color3=White), obtain the URL data like this:
```
encodedUrl = location.search;
```

5. Re-create the selectedColors object as follows:

var selectedColors = Ext.urlDecode(encodedUrl); 
// Now the value of selectedColors' color1 property is 'Blue',
// color2's value is 'Red' and color3's value is 'White'.

How it works...

Ext.urlEncode(object) and Ext.urlDecode(string, overwrite) provide object serialization to URL data and URL data deserialization to objects respectively. Encoding is accomplished by creating the URL query string's key-value pairs based on each object property, or array value passed to the encoding function. Decoding is accomplished by creating an object with a property for each key-value pair that exists in the URL's query string.

There's more...

You can use this recipe when your application needs to send information to the server via AJAX or standard HTTP requests, as well as when you need to use the URL's query string to feed the application data that can later be converted to JavaScript objects.

Determining the object type and converting empty references to a default value

This recipe teaches you how to determine the types of different objects using the facilities of Ext JS, as well as a simple method that can be used to initialize empty references with a default value.

How to do it...

You can determine the types of different objects in the following way:

1. Create some dummy data structures:

var colorsArray = new Array();
colorsArray[0] = 'Blue';
colorsArray[1] = 'Red';
colorsArray[2] = 'White';
var colorsObject = { color1: 'Blue', color2: 'Red', color3: 'White' };
var aNumber = 1;
var aString = '1';
var sample;
var empty;

2. Check the types of our variables:

var colorsArrayType = Ext.type(colorsArray);
// colorsArrayType's value is "array".
var isArray = Ext.isArray(colorsArray);
// isArray is true
var colorsObjectType = Ext.type(colorsObject);
// colorsObjectType's value is "object".
var isArray = Ext.isArray(colorsObject);
// isArray is false
var number = Ext.num(aNumber, 0);
// number is 1.
number = Ext.num(aString, 0);
// Since aString is not numeric, the supplied
// default value (0) will be returned.
var defined = Ext.util.Format.undef(sample);
// defined is an empty string
sample = "sample is now defined";
defined = Ext.util.Format.undef(sample);
// defined is now "sample is now defined".
var notEmpty = Ext.value(empty, 'defaultValue', false);
// notEmpty is 'defaultValue'

How it works...

The Ext.type(object) function is capable of detecting elements, objects, text nodes, whitespaces, functions, arrays, regular expressions, numbers, and node lists.

As its name indicates, Ext.isArray(object) simply checks whether the passed object is a JavaScript array. Ext.num(value, defaultValue), in turn, does a numeric type check on the passed value and returns the default value when the argument is not numeric.

Ext.util.Format.undef(value) is a very useful function when you need to test for undefined values. It returns either the supplied argument or an empty string if the argument is undefined.

Ext.value(value, defaultValue, allowBlank) also allows you to specify a default value when the value being tested is undefined.

Key benefits

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

Description

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.

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

What do you get with eBook?