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
Credits
About the Author
About the Reviewer
Preface

Extending JavaScript objects, the Ext JS way


You can use Ext JS to enhance the native JavaScript classes by making your own functions appear as if they were members of these classes. This recipe uses the Array class as an example, explaining how to augment its features by adding a function that will allow an array to copy itself into another array.

How to do it…

Adding a new function to the Array class is shown in the following steps:

  1. 1. Use Ext JS to add a new function, copyTo(array, startIndex), to the Array class's prototype:

    Ext.applyIf(Array.prototype, {
    copyTo: function(dest, startIndex) {
    l = this.length;
    for (var i = 0; i < l; i++) {
    dest[startIndex + i] = this[i];
    }
    }
    })
    
  2. 2. Create a source array and a destination array in order to test the new function:

    var source = new Array();
    var destination = new Array();
    source[0] = '1';
    source[1] = '2';
    source[2] = '3';
    destination[0] = '4';
    destination[1] = '5';
    destination[2] = '6';
    destination[3] = '7';
    destination[4] = '8';
    destination[5] = '9';
    
  3. 3. Verify that the function is available in the Array class:

    var serialized = destination.toString();
    // serialized is "4,5,6,7,8,9"
    // Copy the source array, starting at index 2 of the destination
    source.copyTo(destination, 2);
    serialized = destination.toString();
    // serialized is "4,5,1,2,3,9"
    
    

How it works…

Ext.applyIf(object1, object2) copies all of the properties of object2 to object1, if they do not already exist. This effectively allows you to add new functionality to object1.

There's more…

If you want to add or replace an object's current properties, you can use Ext.apply(object1, object2). This function will copy the properties of object2 to object1, replacing the ones that object1 has already defined.